html code
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.tab-box {border: 2px solid greenyellow;}/* display: flex弹性盒子，水平方向*/.tab-head {display: flex;}/* flex-grow生长为100%*/.tab-head-div {flex-grow: 1;text-align: center;background: green;border-right: 1px solid white;line-height: 40px;}.tab-head-div.current {background: wheat;}.tab-body-div {display: none;}.tab-body-div.current {display: block;}</style></head><body><div class="tab-box"><div class="tab-head"><div class="tab-head-div current" onclick="selectTab(0)">标签一</div><div class="tab-head-div" onclick="selectTab(1)">标签二</div><div class="tab-head-div" onclick="selectTab(2)">标签三</div><div class="tab-head-div" onclick="selectTab(3)">标签四</div></div><div class="tab-body"><div class="tab-body-div current">1</div><div class="tab-body-div">2</div><div class="tab-body-div">3</div><div class="tab-body-div">4</div></div></div><script type="text/javascript" src="js/tab.js" ></script></body></html>
js code
/** 1.把tab-body-div和tab-head-div选中状态移除* 2.把制定下表的index和tab-head-div和tab-body-div的选中状态加上去*/var tabs = document.getElementsByClassName('tab-head-div'); //标签头集合var tab_bodys = document.getElementsByClassName('tab-body-div'); //标签内容集合function selectTab(index) {for (var i = 0; i < tabs.length; i++) {tabs[i].classList.remove('current');tab_bodys[i].classList.remove('current');}tabs[index].classList.add('current');tab_bodys[index].classList.add('current');}
