最简单实用的 jquery 选项卡 DIV+CSS 页面内可放置无限多个选项卡

最简单实用的 jquery 选项卡 DIV+CSS 页面内可放置无限多个选项卡

html部分：

<div class="news_box"><h2 class="topic_tab" id="myTab1">
<em></em>
<span onclick="nTabs(this,0);" class="curr">公司新闻</span>
<span onclick="nTabs(this,1);">行业新闻</span>
</h2>

<div class="topic_tabcon" id="myTab1_Content0">
<ul>
<li><a target="_blank" href="#" title="公司新闻公司新闻">公司新闻公司新闻</a></li>
<li><a target="_blank" href="#" title="公司新闻公司新闻">公司新闻公司新闻</a></li>
<li><a target="_blank" href="#" title="公司新闻公司新闻">公司新闻公司新闻</a></li>
</ul>
</div>
<div class="topic_tabcon" id="myTab1_Content1">
<ul>
<li><a target="_blank" href="#" title="行业新闻行业新闻">行业新闻行业新闻</a></li>
<li><a target="_blank" href="#" title="行业新闻行业新闻">行业新闻行业新闻</a></li>
<li><a target="_blank" href="#" title="行业新闻行业新闻">行业新闻行业新闻</a></li>
</ul>
</div>

</div>

如果有更多的话，可以以此类推。

js部分：

function nTabs(thisObj,Num){
if(thisObj.className == "curr")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("span");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "curr";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}

}

最后呢就是在也页面顶部调用 jquery ，目前测试 1.32 版本以上都没问题，其他可以自测。