需求:进入页面以div样式的选项卡显示,默认显示第一个,鼠标移上事件(也可以更换为鼠标点击事件)进行切换选项卡
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style type="text/css">
.news{ width:324px; margin-left:8px; border:1px solid #0973b2; padding:1px; height:269px; min-height:269px; background-color:#fff;}
.news_tit{ background: url(../images/hd.gif) repeat-x; height:33px; line-height:33px;overflow:hidden;color:#FF0066; position:relative; font-size:14px; padding-left:10px; font-weight:bold;}
.none {display:none;}
.more{ font-size:12px; font-weight:normal;
position:absolute;
right:9px;
top: 0px;
}
.tab2new div.active{ width:80px; height:34px; line-height:34px; background-color:#d3e8ff; }
.tab2new div.active a{color:#0472bf;}
.tab2new div{ float: left;width:80px; text-align:center; height:26px; line-height:34px;}
.tab2new div a{color:#400040;}
.l{ float:left}
.r{ float:right}
.clear{ clear:both;}
</style>
<script type="text/javascript">
<!--
// JavaScript Document
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("div");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
//-->
</script>
<body>
<!--news-->
<div class="news l">
<div class="news_tit">
<ul id="myTab2" class="tab2new">
<div class="active" οnmοuseοver="nTabs(this,0);">
<a target="_blank" href="#"><span>通知公告</span></a>
</div>
<div class="normal" οnmοuseοver="nTabs(this,1);">
<a target="_blank" href="#"><span>中心动态</span></a>
</div>
<div class="normal" οnmοuseοver="nTabs(this,2);">
<a target="_blank" href="#"><span>要闻速递</span></a>
</div>
</ul>
</div>
<!-- <div class="clear"></div> -->
<!--通知公告-->
<div id="myTab2_Content0">
<ul class="list_1" style="height: 150px">
<div class="c1-body">
<div class="" style="padding:3px 0px;">
<div class="f-left" style="float:left;"> ·
<a href="" target="_blank">111</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="c1-body">
<div class="" style="padding:3px 0px;">
<div class="f-left" style="float:left;"> ·
<a href="#" title="通告" target="_blank">111</a>
</div>
<div class="clear"></div>
</div>
</div>
</ul>
</div>
<!--中心动态-->
<div id="myTab2_Content1" class="none">
<ul class="list_1" style="height: 150px">
<div class="c1-body">
<div class="" style="padding:3px 0px;">
<div class="f-left" style="float:left;"> ·
<a href="#" title="2222" target="_blank">2222</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="c1-body">
<div class="" style="padding:3px 0px;">
<div class="f-left" style="float:left;"> ·
<a href="#" target="_blank">222</a>
</div>
<div class="clear"></div>
</div>
</div>
</ul>
</div>
<!-- 要闻速递 -->
<div id="myTab2_Content2" class="none">
<ul class="list_1" style="height: 150px">
<div class="c1-body">
<div class="" style="padding:3px 0px;">
<div class="f-left" style="float:left;"> ·
<a href="#" title="3333" target="_blank">3333</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="c1-body">
<div class="" style="padding:3px 0px;">
<div class="f-left" style="float:left;"> ·
<a href="#" target="_blank">3333</a>
</div>
<div class="clear"></div>
</div>
</div>
</ul>
</div>
</div>
<!--news end-->
</body>
</html>