Question

用纯js 实现两个div按钮之间的切换

Answer 1

var switchTab = function(tabs, conts, current){
    var i,
        len;
    if(typeof current == "undefined") current = 0;
    if(typeof conts == 'number'){
        current = arguments[1];
        conts = false;
    }

    var helper = function(index){
        tabs[index].addEventListener('click', function(){
            this.className.length > 0 && 
              this.className.indexOf('curr') < 0 ? 
                this.className += ' curr' : this.className = 'curr';
            if( tabs[index] && current != index){
                tabs[current].className = 
                       tabs[current].className.replace(/\s?curr+\s?/, "");
                if(conts){
                    conts[index].style.display = "block";
                    conts[current].style.display = 'none';
                }
                current = index;
            }
        }, false);
    }
    for( i = 0, len = tabs.length; i < len; i++ ){
        helper(i);
    }
}
//tab导航切换
switchTab(document.querySelectorAll('.tab-nav li'),
     document.querySelectorAll('.cont-body'));
     //参数1 tab元素集合
     //参数2 div cont元素集合
    //参数3 默认选中的tab页  可选参数

 <!--大致HTML结构-->
<nav class="tab-nav">
        <ul class="clearfix">
            <li class="curr">1</li>  <!--当前选中项curr类（需要自己写）-->
            <li>2</li>
            <li>3</li>
        </ul>
</nav>
<div class="tab-cont">
    <div class="cont-body">1</div>
    <div class="cont-body">2</div>
     <div class="cont-body">3</div>
<div>
<!--很多地方还可以在写好一点，仅供参考-->

Answer 2

nonenonevnone