jquery实现选项卡效果
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>简洁选项卡</title> <style> body{font-size:9pt;font-family:"微软雅黑",Arial,STHeiti}body,li a,ul{margin:0;padding:0}ul{list-style-type:none}li,li a,ul{display:block}.menu{overflow:hidden;margin:25px 50px;border:1px solid#c9dfed}.menu,.menu .tabtop{display:block;width:600px}.menu .tabtop{padding:0;height:27px;border-bottom:1px solid#d9ebf6;background:#f8fcfa;line-height:27px}.menu .tabtop span{float:left;display:block;padding:0 20px;height:27px;border-right:1px solid#d9ebf6;cursor:pointer}.menu .tabtop .hover{border-bottom:1px solid#fff;background:#fff;font-weight:700}.menu div{display:none;padding:10px 5px}.menu .block{display:block} </style> </head> <body> <div class="menu"> <span class="tabtop"> <span>Tab1</span><span>Tab2</span><span>Tab3</span><span>Tab4</span><span>Tab5</span><span>Tab6</span> </span> <div>Tab1内容<br /><br /></div> <div>Tab2内容<br /><br />Tab2内容<br /><br /></div> <div>Tab3内容<br /><br />Tab3内容<br /><br />Tab3内容<br /><br /></div> <div>Tab4内容<br /><br />Tab4内容<br /><br />Tab4内容<br /><br />Tab4内容<br /><br /></div> <div>Tab5内容<br /><br />Tab5内容<br /><br />Tab5内容<br /><br />Tab5内容<br /><br />Tab5内容<br /><br /></div> <div>Tab6内容<br /><br />Tab6内容<br /><br />Tab6内容<br /><br />Tab6内容<br /><br />Tab6内容<br /><br />Tab6内容<br /><br /></div> </div> </body> </html> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { var i = 0; $(".menu .tabtop span").eq(i).addClass("hover").siblings().removeClass("hover"); $(".menu div").eq(i).addClass("block").siblings().removeClass("block"); $(".menu .tabtop span").mouseover(function () { $(this).addClass("hover").siblings().removeClass("hover"); i = $(".menu .tabtop span").index(this); $(".menu div").eq(i).addClass("block").siblings().removeClass("block"); }); }) </script>
one life,one thing,to be better.
