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

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

html部分：

	<div class="news_box"><h2 class="topic_tab" id="myTab1">
        	<em></em>
        	<span οnclick="nTabs(this,0);" class="curr">公司新闻</span>
            <span οnclick="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 版本以上都没问题，其他可以自测。