var navdiv =document.getElementsByClassName('nav');
for(var i=0;i<navdiv.length;i++){
navdiv[i].index=i;
navdiv[i].onclick=function(){
var contentDiv=document.getElementById('content'+(this.index+1));
var divObj=siblings(contentDiv);
var thisObj=siblings(this);
this.className='nav nav_select';
for(var j=0;j<thisObj.length;j++){
thisObj[j].className='nav';
console.log(thisObj[j]);
}
contentDiv.style.display='block';
for(var j=0;j<divObj.length;j++){
if(divObj[j].className=='contents_div'){
divObj.style.display='none';
}
}
}
}
这样的话,三个选项卡对应的id和className都应该不同吗?应该怎么设置啊,求大神~~
HTML
<ul>
<li target="#panel-1">TAB-1</li>
<li target="#panel-2">TAB-2</li>
<li target="#panel-3">TAB-3</li>
</ul>
<div id="panel-1">这是一个好的开始TAB-1</div>
<div id="panel-2">我们开始到这里了TAB-2</div>
<div id="panel-3">不一定要写如此的代码哦TAB-3</div>
JavaScript
(function(doc){
'use strict';
var slice = Array.prototype.slice;
//因为querySelectorAll返回的是一个array like对象,并不是真正的数组,所以我用Array原型上的slice方法将其处理成一个真正的数组,便于后面的forEarch调用
var tabs = slice.call(doc.querySelectorAll('ul li'));
var panels = slice.call(doc.querySelectorAll('div'));
//遍历每一个卡片tab标签,为其增加点击事件监听器
tabs.forEach(function(tab){
tab.addEventListener('click', function(){
//当点击这个tab标签时,先将所有的面板隐藏
panels.forEach(function(panel){
panel.style.display = 'none';
});
//然后根据当前tab标签中的target属性找到当前tab标签对应的面板,然后将其显示状态修改为显示
doc.querySelector(tab.getAttribute('target')).style.display = 'block';
});
});
//初始化时默认点击一下第一个tab标签,用来给一个默认的现实面板。
//你可以试一下,去掉这句话,默认就不显示任何面板了
tabs[0].click();
}(this.document));
直接看jsFiddle