您的位置：首页 > Web前端 > JQuery

我的tab页面，Jquery方便扩展

2011-04-19 17:07 399 查看

<!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 runat="server">
<title></title>

<style type="text/css">
.tabs
{
list-style: none;
padding: 0;
margin: 0px;
border-bottom: 1px solid silver;
width: 619px;
border-top:0px solid silver;
}
.tabs li
{
float: left;
background: #e0e0e0;
border: 1px solid silver;
border-left: none;
margin: 0px;
}
ul.tabs li a
{
text-decoration: none;
padding: 0 20px;
}
a
{
display: block;
color:Black;
}
.active
{
background-color: White;
border-bottom: 1px solid #fff;
}
.tab_container
{
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
height: 500px;
float: left;
clear: both;
width: 841px;
}
a:hover
{
background-color: White;
color:Red;
}
a:visited
{
color: Black;
}
</style>

<script src="Js/jquery-1.4.1.js" type="text/javascript"></script>

<script src="Js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li").eq(0).addClass("active");
$(".tab_content").eq(0).show();

$(".tabs li").click(function() {
$(".tabs li").removeClass("active");
$(".tab_content").hide();
$(this).addClass("active");

var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn("slow");

});

});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul class="tabs">
<li><a href="#tab1">Menu1</a></li>
<li><a href="#tab2">Menu2</a></li>
<li><a href="#tab3">Menu3</a></li>
<li><a href="#tab4">Menu4</a></li>
<li><a href="#tab5">Menu5</a></li>
<li><a href="#tab6">Menu6</a></li>
<li><a href="#tab7">Menu7</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Cotent1
</div>
<div id="tab2" class="tab_content">
Cotent2
</div>
<div id="tab3" class="tab_content">
Cotent3
</div>
<div id="tab4" class="tab_content">
Cotent4
</div>
<div id="tab5" class="tab_content">
Cotent5
</div>
<div id="tab6" class="tab_content">
Cotent6
</div>
<div id="tab7" class="tab_content">
Cotent7
</div>
</div>
</div>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航