网页选项卡

来源:互联网 发布:js 不等于空字符串 编辑:程序博客网 时间:2024/05/19 13:16

<!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" onclick="setTab('one',1,3)">疑难解答</li>
       <li id="one2" onclick="setTab('one',2,3)">文章</li>
       <li id="one3" onclick="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>

0 0