一个选项卡切换的例子

function nTabs(thisObj, Num) {
              if (thisObj.className == "active") 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 = "active";
                      document.getElementById(tabObj + "_Content" + i).style.display = "block";
                  } else {
                      tabList[i].className = "normal";
                      document.getElementById(tabObj + "_Content" + i).style.display = "none";
                  }
              }
          }

 

 

 

html部分：

<div class="novel-top">
    <div>
     <div class="top_nav">
      <ul id="novel_myTab1">
       <li class="active" οnmοuseοver="nTabs(this,0);"><a
        href="javascript:void(0)" οnfοcus="this.blur();"><span>全部</span>
       </a>
       </li>
       <li class="normal" οnmοuseοver="nTabs(this,1);"><a
        href="javascript:void(0)" οnfοcus="this.blur();"><span>小说阅读</span>
       </a>
       </li>
       <li class="normal" οnmοuseοver="nTabs(this,2);"><a
        href="javascript:void(0)" οnfοcus="this.blur();"><span>杂志阅读</span>
       </a>
       </li>
      </ul>
     </div>
     <div id="novel_myTab1_Content0">
      <p class="p_red">排行榜前10</p>
      <ul class="top_bg">
       <li class="gay_link"><span class="text-top">01</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">02</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">03</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">04</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">05</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">06</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">07</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">08</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">09</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">10</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
      </ul>
     </div>
     <div id="novel_myTab1_Content1" style="display:none;">
      <p class="p_red">排行榜前10</p>
      <ul class="top_bg">
       <li class="gay_link"><span class="text-top">01</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">02</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">03</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">04</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">05</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">06</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">07</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">08</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">09</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">10</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
      </ul>
     </div>
     <div id="novel_myTab1_Content2" style="display:none;">
      <p class="p_red">排行榜前10</p>
      <ul class="top_bg">
       <li class="gay_link"><span class="text-top">01</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">02</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">03</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">04</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">05</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">06</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">07</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">08</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">09</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">10</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
      </ul>
     </div>
    </div>
   </div>