选项卡的例子"/>
jquery实现选项卡的例子
一定要先引入jQuery的文库不然效果实现不了
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.11.0.js"></script><style type="text/css">li,ul,body{margin: 0;padding: 0}li{list-style: none;}.wrap{width: 500px;height: 150px;border: 1px solid red;}.wrap ul{height:50px;border-bottom: 1px solid #ccc;}.wrap ul li{height:50px ;padding: 0 12px;float: left;line-height: 50px;border-right: 1px solid #ccc;}.content div{height:100px ;border: 1px solid blue;}.content div{display: none;}.content div.change{display: block;background:pink}.wrap ul li.action{background:rgb(116, 54, 231) }</style>
</head>
<body><div class="wrap"><ul><li class="action">选项卡1</li><li>选项卡2</li><li>选项卡3</li><li>选项卡4</li><li>选项卡5</li><li>选项卡6</li></ul><div class="content"><div class="change">111</div><div>222</div><div>333</div><div>444</div><div>555</div><div>666</div></div></div><script>$(function(){$("ul li").click(function(){$(this).addClass("action").siblings().removeClass("action")var index = $(this).index();$(".content>div").eq(index).show().siblings().hide()$(".content div").eq(index).addClass("change").siblings().removeClass("change")})})</script>
</body>
</html>
更多推荐
jquery实现选项卡的例子
发布评论