網頁選項卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title></title>

</head>

<script type="text/javascript">

function setTab(name,cursel,n){
   for(i=1;i<=n;i++){
    var menu=document.getElementById(name+i);
    var con=document.getElementById("con_"+name+"_"+i);
    menu.className=i==cursel?"hover":"";
    con.style.display=i==cursel?"block":"none";
   }
  }

</script>

<body>

<div id="Tab1">
     <div class="Menubox">
      <ul>
       <li id="one1" οnclick="setTab('one',1,3)">疑難解答</li>
       <li id="one2" οnclick="setTab('one',2,3)">文章</li>
       <li id="one3" οnclick="setTab('one',3,3)">學習方法</li>
      </ul>
     </div>
     <script type="text/javascript"> document.getElementById("one1").click();</script>
     <div class="Contentbox">
      <div id="con_one_1">
       <a href="#">小學三年級數學題,誰能講解一下</a>
       <br><br>
       <a href="#">make up怎麼使用</a>
       <br><br>
       <a href="#">物理關於摩擦力方面的題型</a>
       <br><br>
       <a href="#">地理問題:洋流形成的原因</a>
       <br>
       <div style="float:right; padding-right:20px;"><a href="#">更多</a></div>
      </div>
      <div id="con_one_2" style="display: none">
       <a href="#">人生一條線,大學一個點</a>
       <br><br>
       <a href="#">怎樣消除心理壓力</a>
       <br><br>
       <a href="#">成功就業是教育和經驗的平衡</a>
       <br><br>
       <a href="#">幸福爲何總遙遠</a>
       <br>
       <div style="float:right; padding-right:20px;"><a href="#">更多</a></div>
      </div>
      <div id="con_one_3" style="display: none">
       <a href="#">提高學習成績的七大環節</a>
       <br><br>
       <a href="#">汲取同學的優點</a>
       <br><br>
       <a href="#">訓練英語聽力的方法</a>
       <br><br>
       <a href="#">如何抓住數學的主要脈絡</a>
       <br>
       <div style="float:right; padding-right:20px;"><a href="#">更多</a></div>
      </div>
     </div>
    </div>

</body>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章