求教原生JS写选项卡和页面内容切换效果

Question

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都应该不同吗？应该怎么设置啊，求大神~~

Answer 1

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