多个选项卡切换

网页Tab切换效果实现

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cnsg/archive/2012/10/19/2730765.html

文章标签：

#javascript #ViewUI

<div class="wrap2top">
                    <div class="nTab">
                        <div class="TabTitle">
                            <ul id="myTab1">
                                <li class="current" onclick="nTabs(this,0);">供应信息分类</li>
                                <li class="wtittxt" onclick="nTabs(this,1);">需求信息分类</li>
                            </ul>
                        </div>
                        <div class="TabContent">
                            <div id="myTab1_Content0">
                                aaaaa
                            </div>
                            <div id="myTab1_Content1" class="none">
                                ssssss
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wrap2down">
                    <div class="nTab">
                        <div class="TabTitle">
                            <ul id="myTab2">
                                <li class="current" onclick="nTabs(this,0);">供应信息</li>
                                <li class="wtittxt" onclick="nTabs(this,1);">需求信息</li>
                            </ul>
                        </div>
                        <div class="TabContent">
                            <div id="myTab2_Content0">
                               111111111111
                            </div>
                            <div id="myTab2_Content1" class="none">
                              222222222222222
                            </div>
                        </div>
                    </div>
                </div>

 <script type="text/javascript">
    function nTabs(thisObj,Num){
if(thisObj.className == "current")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
   thisObj.className = "current"; 
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
   tabList[i].className = "wtittxt"; 
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
} 
}</script>