tab栏切换原型封装------彭记(013)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了tab栏切换原型封装------彭记(013)相关的知识,希望对你有一定的参考价值。

tab栏切换原型封装

<body>
<div class="wrapper" id="wrapper">
    <ul class="tab" id="tab-menu">
        <li class="tab-item active">文字1<span></span></li>
        <li class="tab-item">文字2<span></span></li>
        <li class="tab-item">文字3<span></span></li>
        <li class="tab-item">文字4</li>
    </ul>
    <div class="products" id="tab-main">
        <div class="main selected">
            <a href="###"><img src="图片1" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="图片2" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="图片3" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="图片4" alt=""/></a>
        </div>
    </div>
</div>

<script src="../js/jquery-1.7.2.min.js"></script>
<script>
    //jq实现
    /*$("#tab-menu").on(‘click‘,‘li‘,function(){
        /!* 为当前单击的tab导航项添加active样式,同时删除兄弟元素的active元素*!/
        $(this).addClass("active").siblings("li").removeClass("active");

        /!*获取当前被点击的导航项的索引*!/
        var index = $(this).index();

        /!*为当前导航项对应的内容面板添加selected样式,同时清除内容面板兄弟元素的样式*!/
        $("#tab-main >.main").eq(index).addClass("selected").siblings("div").removeClass("selected");
    })*/

    var tab = new MyTab({
        tab_menu:"tab-menu",
        tab_main:"tab-main",
        autoPlay:true
    });
</script>
</body>

css

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
.wrapper {
    width: 1000px;
    height: 475px;
    margin: 0 auto;
    margin-top: 100px;
}

.tab {
    border: 1px solid #ddd;
    border-bottom: 0;
    height: 36px;
    width: 320px;
}

.tab li {
    position: relative;
    float: left;
    width: 80px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    border-top: 4px solid #fff;
}

.tab span {
    position: absolute;
    right: 0;
    top: 10px;
    background: #ddd;
    width: 1px;
    height: 14px;
    overflow: hidden;
}

.products {
    width: 1002px;
    border: 1px solid #ddd;
    height: 476px;
}

.products .main {
    float: left;
    display: none;
}

.products .main.selected {
    display: block;
}

.tab li.active {
    border-color: red;
    border-bottom: 0;
}

/*js 
--有用到沙箱模式*/
/*1.获取标签页导航项 * 2.循环为标签页导航项添加点击事件 * 3.为当前被点击的导航项添加active样式,同时为兄弟元素移除active样式*/ /*1.获取当前需要展示的内容面板的索引 * 2.为当前索引的内容面板添加selected样式 * 3.为当前索引的内容面板的兄弟元素移除selected样式*/ (function(window){ function MyTab(option){ this.tab_items = null; this.content_items = null; this.index = 0; /*code a little debug a little*/ this.init(option); } /*封装功能到原型*/ MyTab.prototype = { constructor:MyTab, /*初始化*/ init:function(option){ this.getElements(option); this.registerEvent(); if(option.autoPlay){ /*实现自动轮播*/ this.autoPlay(); } }, getElements:function(option){ /*获取标签页导航项*/ this.tab_items = document.getElementById(option.tab_menu).children; /*获取所有内容面板*/ this.content_items = document.getElementById(option.tab_main).children; }, registerEvent:function(){ /*将当前对象存储在_this变量中*/ var _this = this; /*循环为标签页导航项添加点击事件*/ for(var i=0;i<this.tab_items.length;i++){ var item = this.tab_items[i]; /*存储索引*/ item.index = i; item.onclick = function(){ _this.index = this.index; _this.toggle(this); } } }, autoPlay:function(){ var _this = this; setInterval(function(){ _this.toggle(_this.tab_items[_this.index ++ % 4]); },2000); }, toggle:function(dom){ /*这里的this主是当前构造函数创建的对象*/ for(var j =0; j < this.tab_items.length;j++){ /*为当前被点击的导航项添加active样式,同时为兄弟元素移除active样式*/ this.tab_items[j].classList.remove("active"); /*为当前索引的内容面板的兄弟元素移除selected样式*/ this.content_items[j].classList.remove("selected"); } /*需要当前被点击的元素*/ dom.classList.add("active"); /*操作内容面板*/ /*为当前索引的内容面板添加selected样式*/ this.content_items[dom.index].classList.add("selected"); } } /*提供外部访问的接口*/ window.MyTab = MyTab; })(window);

 

 

 

 

 

以上是关于tab栏切换原型封装------彭记(013)的主要内容,如果未能解决你的问题,请参考以下文章

jQuery实现tab栏切换效果

小程序--导航栏切换(tab切换)

小程序--导航栏切换(tab切换)

JavaScript实现Tab栏切换

04-DOM操作练习:Tab栏切换(通过className设置样式)

tab切换代码优化