用jquery怎么实现tab切换
发布网友
共2个回答
热心网友
<html>
<head>
<title>Tab Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{ margin: 0; padding: 0;}
.container{ width: 1000px; height: auto; margin: 0 auto; border: 1px solid #4e4e4e;}
.tab-head{ width: 100%; height: 50px;border-bottom: 1px solid #4e4e4e; }
.tab-head ul{ width: 100%; height: 50px; list-style: none;}
.tab-head ul .normal-li{ width: 150px; height: 50px; float: left; line-height: 50px; text-align: center; font-family: "Microsoft YaHei"; font-weight: bold; font-size: 20px; background-color: #fff; color: #111; cursor: pointer;}
.tab-head ul .selected-li{ width: 150px; height: 50px; float: left; line-height: 50px; text-align: center; font-family: "Microsoft YaHei"; font-weight: bold; font-size: 20px; background-color: #111; color: #fff;}
.tab-content{ width: 100%; height: auto;}
.tab-content ul{ width:100%; height: auto; list-style: none;}
.tab-content ul li{ width:100%; height: 500px; display:none; }
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var currentIndex=0;
$(document).ready(function(){
$(".tab-head ul li").click(function(){
var index=$(this).index();
if(currentIndex!=index) {
currentIndex=index;
$(this).removeClass("normal-li").addClass("selected-li");
$(this).siblings().removeClass("selected-li").addClass("normal-li");
var contents=$(".tab-content").find("li");
$(contents[index]).show();
$(contents[index]).siblings().hide();
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="tab-head">
<ul>
<li class="selected-li">导航</li>
<li class="normal-li">推荐</li>
<li class="normal-li">购物</li>
<li class="normal-li">视频</li>
</ul>
</div>
<div class="tab-content">
<ul>
<li style="background-color: antiquewhite; display: block;">导航</li>
<li style="background-color:antiquewhite ;">推荐</li>
<li style="background-color:antiquewhite ;">购物</li>
<li style="background-color:antiquewhite ;">视频</li>
</ul>
</div>
</div>
</body>
</html>
热心网友
他回答好详细,但是不建议你这样啊,你记住能从键盘上获取每个键的Asic II码,然后在适当的功能触发事件tab建就好了,这样能记住的牢些.....
