Tab选项卡交互示例1

原创
2016/03/15 23:20
阅读数 240

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初始化完成后就开始执行初始化逻辑,从而有效避免这类问题。

展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部