简单jsTab切换

// 顶部tab切换
    function setTab(name,cursel,n){
        for(i=1;i<=n;i++){
            var menu=document.getElementById(name+i);
            var con=document.getElementById("con_"+name+"_"+i);
            menu.className=i==cursel?"hover":"";
            con.style.display=i==cursel?"block":"none";
        }
    }
    <div class="addTab text-center">
    <ul class="clearfix">
        <li id="list1" onclick="setTab('list',1,4)" class="hover">1</li>
        <li id="list2" onclick="setTab('list',2,4)">2</li>
        <li id="list3" onclick="setTab('list',3,4)">3</li>
        <li id="list4" onclick="setTab('list',4,4)">4</li>
    </ul>
</div>
<div class="row" id="con_list_1" style="display: block;">
1内容
</div>
<div class="row" id="con_list_2" style="display: none;">
2内容
</div>
<div class="row" id="con_list_3" style="display: none;">
3内容
</div>
<div class="row" id="con_list_4" style="display: none;">
4内容
</div>
发布了25 篇原创文章 · 获赞 0 · 访问量 576

猜你喜欢

转载自blog.csdn.net/luyundesign/article/details/104945202