jquery制作选项卡
Posted 2350305682
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery制作选项卡相关的知识，希望对你有一定的参考价值。
思路：点击按钮后，先让所有的按钮的class属性都为“”，所有的div的display样式都为none；再让当前被点击按钮的class属性为active，以及所对应的div的display样式为block。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
#nav button{width:200px;height:50px;}
#nav .active{background:yellow;}
.news{width:600px;height:600px;}
.a{display:block;background:pink;}
.b{display:none;background:blue;}
.c{display:none;background:green;}
</style>
<title>jquery制作选项卡</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#nav").find("button").click(function(){
$("#nav").find("button").attr("class","");
$("#news").find(".news").css("display","none");
$(this).attr("class","active");
$("#news").find(".news").eq($(this).index()).css("display","block");
});
});
</script>
</head>
<body>
<div id="nav">
<button class="active">新闻动态</button>
<button>专题制作</button>
<button>图片欣赏</button>
</div>
<div id="news">
<div class="news a">aaa</div>
<div class="news b">bbb</div>
<div class="news c">ccc</div>
</div>
</body>
</html>
以上是关于jquery制作选项卡的主要内容，如果未能解决你的问题，请参考以下文章
Css & JavaScript & jquery 实现选项卡的制作