ASP.NET中代码内嵌和代码后置的区别与实现方式
1个回答
展开全部
那就是一个简单的tab效果的啊
下面是一个demo，把引用的jquery换成你的路径
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
