`

纯javascript tab切换

tab切换 
阅读更多 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style type="text/css">
    *{
     margin:0;
     padding:0;
     list-style:none;
     font-size:12px;
    }
    .tab{
  width:298px;
  height:98px;
  margin:10px;
  border:1px solid #eee;
  overflow:hidden;
 }
 .tab_title{
  height:27px;
  position:relative;
  background:#f7f7f7;
 }
 .tab_title ul{
  position:absolute;
  width:301px;
  left:-1;
 }
 .tab_title li{
  float:left;
  width:58px;
  height:26px;
  line-height:26px;
  text-align:center;
  padding:0 1px;
  border-bottom:1px solid #eee;
  overflow:hidden;
 }
 .tab li a:link,.tab li a:visited{
  text-decoration:none;
  color:#000;
 }
 .tab li a:hover{
  color:#f90;
  font-weight:700;
 }
 .tab_title li.select{
  background:#fff;
  border-botton-color:#fff;
  border-left:1px solid #eee;
  border-right:1px solid #eee;
  padding:0;
 }
 .tab .tab_content .tabct{
  margin:10px 10px 10px 19px;
 }
 .tab .tab_content .tabct ul li{
  float:left;
  width:134px;
  height:25px;
  overflow:hidden;
 }
</style>
<script type="text/javascript">
 function $(id){
  return typeof id=="string"?document.getElementById(id):id;
 }
 window.onload = function(){
  var titleName = $("tab_title").getElementsByTagName("li");
  var tabContent = $("tab_content").getElementsByTagName("div");
  if(titleName.length != tabContent.length){
   return;
  }
  for(var i=0;i<titleName.length;i++){
   titleName[i].id = i;
   titleName[i].onmouseover = function(){
    for(var j = 0;j<titleName.length;j++){
     titleName[j].className="";
     tabContent[j].style.display="none";
    }
    this.className = "select";
    tabContent[this.id].style.display="block";
   }
  }
 }
</script>
</head>
<body>
<div class="tab" id="tab">
 <div class="tab_title"  id="tab_title">
  <ul>
   <li class="select">
       <a href="">公告</a>
   </li>
   <li>
       <a href="">规则</a>
   </li>
   <li>
       <a href="">论坛</a>
   </li>
   <li>
       <a href="">安全</a>
   </li>
   <li>
       <a href="">工艺</a>
   </li>
  </ul>
 </div>
 <div class="tab_content" id="tab_content">
  <div class="tabct" style="display:block">
   <ul>
    <li>
     <a href="" >马云台大激励青年创业0</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
  <div class="tabct" style="display:none">
   <ul>
    <li>
     <a href="">马云台大激励青年创业1</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
  <div class="tabct" style="display:none">
   <ul>
    <li>
     <a href="">马云台大激励青年创业2</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
  <div class="tabct" style="display:none">
   <ul>
    <li>
     <a href="">马云台大激励青年创业3</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
  <div class="tabct" style="display:none">
   <ul>
    <li>
     <a href="">马云台大激励青年创业4</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

 

 

  • 大小: 3 KB
分享到：
| div布局
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics