<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.0.js"></script>
<style type="text/css">
body,div,ul{ padding:0; margin:0;}
#container{width:800px; margin:50px;}
.tab{ padding:0; margin:0; }
.tab li{ list-style:none; float:left;padding:0; margin-right:10px; line-height:30px; height:30px; width:65px; text-align:center;}
.content{ float:none; padding-top:30px; border:solid 1px black; clear:both; }
.content div{ border-top:0px; height:60px;}
.tab_selected{ border-left:solid 1px black; background-color:#ffffff; border-right:solid 1px black;
border-top:solid 1px black; border-bottom:0px; bottom:-1px; position:relative; z-index:1}
.tab_current{ text-decoration:underline;}
</style>
<script language="javascript" type="text/javascript">
$(
function() {
$(".content div:gt(0)").hide();
$(".tab li").css("cursor", "pointer");
$(".tab li").hover(function() {
$(this).addClass("tab_current");
}, function() {
$(this).removeClass("tab_current");
}).click(
function() {
$(this).addClass("tab_selected").siblings().removeClass("tab_selected");
$(".content div").eq($(this).index()).siblings().hide().end().show();
}
)
}
);
</script>
</head>
<body>
<div id="container">
<div class="tab">
<ul>
<li class="tab_selected">选项卡A</li>
<li>选项卡B</li>
<li>选项卡C</li>
</ul>
</div>
<div class="content">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.0.js"></script>
<style type="text/css">
body,div,ul{ padding:0; margin:0;}
#container{width:800px; margin:50px;}
.tab{ padding:0; margin:0; }
.tab li{ list-style:none; float:left;padding:0; margin-right:10px; line-height:30px; height:30px; width:65px; text-align:center;}
.content{ float:none; padding-top:30px; border:solid 1px black; clear:both; }
.content div{ border-top:0px; height:60px;}
.tab_selected{ border-left:solid 1px black; background-color:#ffffff; border-right:solid 1px black;
border-top:solid 1px black; border-bottom:0px; bottom:-1px; position:relative; z-index:1}
.tab_current{ text-decoration:underline;}
</style>
<script language="javascript" type="text/javascript">
$(
function() {
$(".content div:gt(0)").hide();
$(".tab li").css("cursor", "pointer");
$(".tab li").hover(function() {
$(this).addClass("tab_current");
}, function() {
$(this).removeClass("tab_current");
}).click(
function() {
$(this).addClass("tab_selected").siblings().removeClass("tab_selected");
$(".content div").eq($(this).index()).siblings().hide().end().show();
}
)
}
);
</script>
</head>
<body>
<div id="container">
<div class="tab">
<ul>
<li class="tab_selected">选项卡A</li>
<li>选项卡B</li>
<li>选项卡C</li>
</ul>
</div>
<div class="content">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</div>
</body>
</html>
扫一扫
84
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
