Tab选项卡交互示例1

摘要: 可读性较高的选项卡结构代码+jQuery切换脚本代码

1.可读性较高的Tab选项卡结构代码

//如下结构更具语义性和可读性
<ul class="tabs">
<li class="tab1">
<h3>公告</h3>
<div>tab1 content</div>
</li>
<li class="tab2">
<h3>规则</h3>
<div>tab2 content</div>
</li>
<li class="tab3">
<h3>保障</h3>
<div>tab3 content</div>
</li>
<li class="tab4">
<h3>公益</h3>
<div>tab4 content</div>
</li>
</ul>

2.加入CSS样式

ul.tabs{list-style:none;}
ul.tabs li{clear:both;}
ul.tabs li h3{padding:0;margin:0;font-size:13px;position:absolute;height:50px;width:63px;top:0;left:0;text-indent:-9999px;cursor:hand;}
ul.tabs li div{position:absolute;top:50px;left:0;}
ul li.tab1 h3{left:0;background:url(tab_nav.png) no-repeat 0 0;}
ul li.tab2 h3{left:63px;background:url(tab_nav.png) no-repeat -63px 0;}
ul li.tab3 h3{left:126px;background:url(tab_nav.png) no-repeat -126px 0;}
ul li.tab4 h3{left:189px;background:url(tab_nav.png) no-repeat -189px 0;}
ul .tab1 h3.current{background-position:0 -50px;}
ul .tab2 h3.current{background-position:-63px -50px;}
ul .tab3 h3.current{background-position:-126px -50px;}
ul .tab4 h3.current{background-position:-189px -50px;}
//关于导航的背景使用了图片位移技术，减少了服务器与客户端之间的交互。

3.切换脚本代码

$(document).ready(function() {
//当页面加载的时候进行初始化操作
$("ul.tabs li div").hide();  //隐藏所有内容
$("ul.tabs li h3:first").addClass("current");  //第一个tab的标题样式置为选中
$("ul.tabs li div:first").show();  //显示第一个Tab内容
//为Tab绑定点击事件
$("ul.tabs li h3").click(function() {
$(ul.tabs li h3).removeClass("current");  //删除所有的选中状态样式
$(this).addClass("current");  //将当前点击的元素设为选中
$("ul.tabs li div").hide();  //隐藏所有内容
$(this).next().fadeIn();  //显示DIV
});
});

解析使用javaScript onload事件和jquery ready方法的区别

(1). onload事件：需要页面元素全部加载完成才会被调用，若页面较大或者网站较慢（有大量图片或者多媒体文件），则可能出现初始化逻辑没有运行，用户就已经开始进行操作，造成体验方面的问题。

(2). ready方法：可以让开发人员在DOM初始化完成后就开始执行初始化逻辑，从而有效避免这类问题。