首页 > 代码库 > 符合web标准的tab标签切换
符合web标准的tab标签切换
优点：
符合现在流行的web标准。结构、样式、行为三者实现真正的分离。
/*结构-html*/
<div id="box"> <ul id="tab"> <li class="on">Home</li> <li>Product</li> <li>About</li> </ul> <ul id="tab_con"> <li>Home Content</li> <li class="off">Product Content</li> <li class="off">About Content</li> </ul></div>
/*样式-css*/
<style type="text/css"> #box{padding: 20px;font-size:12px} #box ul{margin:0;padding:0;list-style:none} #tab{height:25px; padding-left: 10px;border-bottom:1px solid #aacbee; } #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer} #tab li:hover{color:#ca4e00; font-weight:bold;} #tab li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px; color:#CA4E00; font-weight:bold;} #tab_con{border-top:none;padding:10px 20px 20px 20px;} #tab_con .off{display:none;} </style>/*行为-js*/
<script type="text/javascript"> $(function(){ $("#tab li").click(function(){ var idx=$("#tab li").index(this); $(this).addClass("on").siblings().attr("class",""); $("#tab_con").children(":eq("+idx+")").show().siblings().hide(); }) }) </script>符合web标准的tab标签切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。