最簡單實用的 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 版本以上都沒問題，其他可以自測。