关联选项卡

最新推荐文章于 2024-10-08 19:04:00 发布

yangzhenmei0107

最新推荐文章于 2024-10-08 19:04:00 发布

阅读量253

点赞数

文章标签： class float xhtml function string html

本文链接：https://blog.csdn.net/yangzhenmei0107/article/details/6483362

版权

<!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=gb2312" />
<title>关联选项卡</title>
<style>
*{padding:0; margin:0; font-size:12px;}
ul{list-style:none;}
.box_01{width:500px; margin:0 auto; overflow:hidden;zoom:1; background-color:#FF0000; padding:10px;}
.ul_01{width:500px;float:left; cursor:pointer; padding-left:50px; }
.ul_02{width:50px; float:left; cursor:pointer;}
.ul_02 li{width:20px; height:60px; display:block; float:right; clear:left; clear:right; margin-bottom:5px;}
.ul_01 li{width:100px; height:20px; line-height:20px; margin-right:5px; text-align:center; display:block; float:left; color:#000000;}
.hov{display:block;width:450px; height:300px; line-height:300px; background-color:#ffffff; float:right; text-align:center;}
.nor{display:none;width:450px; height:300px; line-height:300px; background-color:#ffffff; float:right; text-align:center;}
.hov01{background-color:#ffffff; font-weight:bold;}
.nor01{background-color:#99CC00; font-weight:400;}
</style>
</head>
<body>
<div class="box_01">
<ul class="ul_01" id="aa">
<li οnclick="gotab(1)" class="hov01">test01</li>
<li οnclick="gotab(2)" class="nor01">test02</li>
<li οnclick="gotab(3)" class="nor01">test03</li>
<li οnclick="gotab(4)" class="nor01">test04</li>
</ul>
<ul class="ul_02" id="bb">
<li οnclick="gotab(1)" class="hov01">01</li>
<li οnclick="gotab(2)" class="nor01">02</li>
<li οnclick="gotab(3)" class="nor01">03</li>
<li οnclick="gotab(4)" class="nor01">04</li>
</ul>
<div id="tab_1" class="hov">111111111</div>
<div id="tab_2" class="nor">222222222</div>
<div id="tab_3" class="nor">333333333</div>
<div id="tab_4" class="nor">444444444</div>
</div>
<script>
function $(id){return "string"==typeof id?document.getElementById(id):id;}
var d=$("aa").getElementsByTagName("li");
var e=$("bb").getElementsByTagName("li");
function gotab(n){
   for(var i=1;i<=d.length;i++){
      $("tab_"+i).className='nor';
   d[i-1].className='nor01';
      e[i-1].className='nor01';
      }
    $("tab_"+n).className='hov';
     d[n-1].className='hov01';
  e[n-1].className='hov01';
}
</script>
</body>
</html>