符合web标准的tab标签切换

原创 stopMe 随笔 页面交互 1171阅读 2014-08-21 14:12:25 举报

概述:
这只是一个很简单的tab切换案列。在公司的项目开发中,一直在使用,然后不断的优化,使代码变得更加健壮,可适应变化。

优点:
符合现在流行的web标准。结构、样式、行为三者实现真正的分离。

/结构-html/
[code]<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>[/code]
/样式-css/
[code]<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>[/code]
/行为-js/
[code]<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>[/code]

可供演示的源码,欢迎大家的指正:
代码片段 1

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复