JS tab选项卡效果！！求助
左侧有一个竖行菜单，点击菜单内的子栏目，右侧显示一个tab翻页样式。左侧菜单不同的子栏目点击，右侧出现的tab选项卡内容不同，内容也不同...
左侧有一个竖行菜单，点击菜单内的子栏目，右侧显示一个tab翻页样式。左侧菜单不同的子栏目点击，右侧出现的tab选项卡内容不同，内容也不同
展开
2个回答
展开全部
你好这里是用jquery做的，直接复制就可以看到效果
<html>
<head>
<title></title>
<style>
.tab1{ width:100px; height:100px; border:1px solid red;}
ul.tabs_ul{ width:300px; float:left;}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
$("div.tab1").eq(0).show().siblings("div.tab1").hide();
$("ul.tabs_ul>li").click(
function () {
var i = $(this).index();
$("div.tab1").eq(i).show().siblings("div.tab1").hide();
})
});
</script>
</head>
<body>
<ul class="tabs_ul">
<li><a href="#">信息意识</a></li>
<li><a href="#">信息技能</a></li>
<li><a href="#">信息道德</a></li>
<li><a href="#">信息评价</a></li>
<li><a href="#">综合</a></li>
</ul>
<div class="tab1">
这是第1个
</div>
<div class="tab1">
这是第2个
</div>
<div class="tab1">
这是第3个
</div>
<div class="tab1"> 这是第4个
</div>
<div class="tab1"> 这是第5个
</div>
</body>
</html>
不懂问我，希望帮到你
<html>
<head>
<title></title>
<style>
.tab1{ width:100px; height:100px; border:1px solid red;}
ul.tabs_ul{ width:300px; float:left;}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
$("div.tab1").eq(0).show().siblings("div.tab1").hide();
$("ul.tabs_ul>li").click(
function () {
var i = $(this).index();
$("div.tab1").eq(i).show().siblings("div.tab1").hide();
})
});
</script>
</head>
<body>
<ul class="tabs_ul">
<li><a href="#">信息意识</a></li>
<li><a href="#">信息技能</a></li>
<li><a href="#">信息道德</a></li>
<li><a href="#">信息评价</a></li>
<li><a href="#">综合</a></li>
</ul>
<div class="tab1">
这是第1个
</div>
<div class="tab1">
这是第2个
</div>
<div class="tab1">
这是第3个
</div>
<div class="tab1"> 这是第4个
</div>
<div class="tab1"> 这是第5个
</div>
</body>
</html>
不懂问我，希望帮到你
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
