Div+CSS选项卡
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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>
<title>div+css选项卡代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="PR" />
<script type="text/javascript"></script>
<style type="text/css">
/* 选项卡关键属性 */
#tab { width:900px; height:30px; position:relative; margin:0px auto;} /*设置容器高宽等*/
html > body #tab { width:900px; }/*兼容IE6:IE6下宽度不够*/
#tab div { position:absolute; top:26px; left:0; width:900px; height:300px;}/*设置被操作容器高宽等*/
#tab div { display:none; }/*设置被操作容器默认隐藏:不用ID是因为下面将利用class来控制被操作容器显示,而class优先级低于id选择器*/
#tab .block { display:block; padding-left:5px; padding-right:5px; padding-top:2px;}/*选中的被操作容器*/
#tab h3 { float:left; width:75px; height:26px; line-height:26px; margin:0 -1px 0 0; font-size:12px; cursor:pointer; font-weight:normal; text-align:center; color:#00007F; background:#eee url(menu_bg.gif) no-repeat; font-weight:bold;}/*默认标题样式*/
#tab .up { background:#fff url(x20061212105231.gif) no-repeat; }/*选中的标题样式*/
/*修饰列表内容*/
#tab ul { margin:0px; list-style:none; padding:0;}
#tab li { float:left; width:50%; background: }
#tab li a { display:block; width:84%; height:25px; line-height:25px; margin-left:8%; font-size:12px; text-decoration:none; color:#333;text-indent:10px; }
#tab li a:hover { text-decoration:underline; color:#f00;}
</style>
</head>
<body>
<div id="tab">
<h3 class="up" onmouseover="go_to(1);">铁板牛排</h3>
<div class="block">
<script language='JavaScript1.2' type='text/JavaScript' src='http://show.jianjie8.com/JS/ShowClass_Menu.js'></script>
</div>
<h3 onmouseover="go_to(2);">田心鱼儿</h3>
<div>
2
</div>
<h3 onmouseover="go_to(3);">萧萧小雨</h3>
<div>
3
</div>
<h3 onmouseover="go_to(4);">禾火木风</h3>
<div>
4
</div>
<h3 onmouseover="go_to(5);">章之小依</h3>
<div>
5
</div>
<script type="text/javascript">
<!--
var h=document.getElementById("tab").getElementsByTagName("h3");
var d=document.getElementById("tab").getElementsByTagName("div");
function go_to(ao){
for(var i=0;i<h.length;i++){
if(ao-1==i){
h[i].className+=" up";
d[i].className+=" block";
}
else {
h[i].className=" ";
d[i].className=" ";
}
}
}
//-->
</script>
</div>
</body>
</html>
posted on 2007-07-06 09:56 wanglinBlog 阅读(4662) 评论(5) 编辑 收藏 举报
