当前位置: 主页 > 网络知识 > 网站制作技术 >

多选项卡切换_同一页面多次使用

时间:2013-02-24 13:56来源:未知 作者:admin 点击:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titlejavascrip

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
* {margin: 0px;padding: 0px;list-style: none;}
body{ font:12px/22px}
.box{ overflow:hidden; width:96%; margin:20px; vertical-align:middle; text-align:center;}
  .box_1{border:1px solid #e2e2e2; background-color:#fff;}
  .box_2{border:1px solid #e2e2e2; background:url(images/box_2Bg.gif) repeat-x top left;
  background-color:#edf8fe;  overflow:hidden;
  }
  .boxCenterList{padding:8px;}
  /*模块标题*/
  h3{height:32px; line-height:32px; font-size:12px; background:url(images/category_tit.gif) repeat-x; text-align:right;
  padding:0 12px; font-weight:100;
  }
  h3.border{border:1px solid #e2e2e2; border-bottom:none;}
  h3 img{position:relative; top:7px;}
  h3 span{float:left; height:32px; line-height:32px; text-align:left;
   font-weight:bold; color:#990000; padding-left:5px;}
   h3 a{ color:#333; text-decoration:none}
.tab{line-height:24px;}
.tab li {float:left; text-align:center;cursor:hand;height:26px; line-height:26px; padding:0px 10px 0 20px; text-align:center; font-size:12px;float:left; color:#666; background:none;margin:6px 5px 0 0; border:none; }
.tab li.hover{border:1px solid #e2e2e2;height:26px; line-height:26px; padding:0px 10px 0 20px; text-align:center; font-size:12px;float:left; color:#666; background:#fff;margin:6px 5px 0 0; border-bottom:none;}
</style>
</head>

<body>
<div class="box">
<div class="box_1" style="height:250px;overflow:hidden;">
<h3 style="padding:0 5px;">
<ul id="tab1" class="tab" onmouseover="tab(this)">
  <li class="hover">1</li>
  <li>2</li>
  <li>3</li>
</ul>
</h3>
  <div id="tab1_0">1111</div>
  <div id="tab1_1" style="display:none">2222</div>
  <div id="tab1_2" style="display:none">333333</div>
  </div>
  </div>
 
 
<div class="box">
<div class="box_1" style="height:250px;overflow:hidden;">
<h3 style="padding:0 5px;">
<ul id="tab2" class="tab" onmouseover="tab(this)">
  <li class="hover">1</li>
  <li>2</li>
  <li>3</li>
</ul>
</h3>
  <div id="tab2_0">1111</div>
  <div id="tab2_1" style="display:none">2222</div>
  <div id="tab2_2" style="display:none">333333</div>
  </div>
  </div>
<script type="text/javascript">
function tab(tabthis){
 var tabid = tabthis.id;
 var tabthis_li = tabthis.getElementsByTagName('li')
 for(var i = 0 ; i < tabthis_li.length ; i++){
   tabthis_li[i].onmouseover = (function(i){
    return function(){
     for(var j =0; j< tabthis_li.length ; j++){
      tabthis_li[j].className = ''
      var tab_div = document.getElementById(tabid + '_' + j)
      tab_div.style.display = 'none'
     }
     tabthis_li[i].className = 'hover'
     var divblock = document.getElementById(tabid + '_' + i)
     divblock.style.display = 'block'
    }
   })(i)
 }
}
</script>
</body>
</html>

(责任编辑:admin)
顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
推荐内容