jquery简单插件到复杂插件（1）--tabs

写在前面，到了新公司开始转做前段，之前一直写php，一共写了半年，转过来，jq都用不好，但是还是得不断的学习，谁没菜过。从最简单的开始写，最近也在学习些html5的小游戏，加油吧。js原生写的可以说惨不忍睹，不断加油吧。

html部分：

<ul id="tabs">

            <li><a href="#" name="tab1" onclick="aclick(this,1)">一</a></li>

            <li><a href="#" name="tab2" onclick="aclick(this,3)">二</a></li>

            <li><a href="#" name="tab3" onclick="aclick(this,5)">三</a></li>

            <li><a href="#" name="tab4" onclick="aclick(this,7)">四</a></li>

        </ul>

        <div id="content">

            <div id="tab1">

                <h2>那是第一个</h2>

                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

                                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

                                                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

                                                                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

            </div>

            <div id="tab2">

                <h2>那是第二个</h2>

                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

                                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

                                                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

                                                                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

            </div>

            <div id="tab3">

                <h2>那是第三个</h2>

                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

                                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

                                                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

                                                                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

            </div>

            <div id="tab4">

                <h2>那是第四个</h2>

                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

                                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

                                                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

                                                                <p>那是第一个那是第一个那是第一个那是第一个那是第一个那是第一个</p>

            </div>

        </div>

css：

#tabs

{

    overflow: hidden;

    width: %;

    margin: ;

    padding: ;

    list-style: none;

}

#tabs li

{

    float: left;

    margin:  .5em  ;

}

#tabs a

{

    position: relative;

    background: #ddd;

     background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));

    background-image: -webkit-linear-gradient(top, #fff, #ddd);

    background-image: -moz-linear-gradient(top, #fff, #ddd);

    background-image: -ms-linear-gradient(top, #fff, #ddd);

    background-image: -o-linear-gradient(top, #fff, #ddd);

    background-image: linear-gradient(to bottom, #fff, #ddd);

    padding: .7em .5em;

    float: left;

    text-decoration: none;

    color: #;

    text-shadow:  1px  rgba(,,,0.8);

    -webkit-border-radius: 5px   ;

    -moz-border-radius: 5px   ;

    border-radius: 5px   ;

    -moz-box-shadow:  2px 2px rgba(,,,.);

    -webkit-box-shadow:  2px 2px rgba(,,,.);

    box-shadow:  2px 2px rgba(,,,.);

}

#tabs a:hover,

#tabs a:hover::after,

#tabs a:focus,

#tabs a:focus::after {

  background: #fff;

}

#tabs a:focus {

  outline: ;

}

#tabs a::after {

  content:'';

  position:absolute;

  z-index: ;

  top: ;

  right: -.5em;

  bottom: ;

  width: 1em;

  background: #ddd;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));

  background-image: -webkit-linear-gradient(top, #fff, #ddd);

  background-image: -moz-linear-gradient(top, #fff, #ddd);

  background-image: -ms-linear-gradient(top, #fff, #ddd);

  background-image: -o-linear-gradient(top, #fff, #ddd);

  background-image: linear-gradient(to bottom, #fff, #ddd);

  -moz-box-shadow: 2px 2px 2px rgba(,,,.);

  -webkit-box-shadow: 2px 2px 2px rgba(,,,.);

  box-shadow: 2px 2px 2px rgba(,,,.);

  -webkit-transform: skew(10deg);

  -moz-transform: skew(10deg);

  -ms-transform: skew(10deg);

  -o-transform: skew(10deg);

  transform: skew(10deg);

  -webkit-border-radius:  5px  ;

  -moz-border-radius:  5px  ;

  border-radius:  5px  ;

}

#tabs #current a {

  background: #fff;

  z-index: ;

}

#tabs #current a::after {

  background: #fff;

  z-index: ;

}

#content

{

    background: #fff;

    padding: 2em;

    height: 220px;

    position: relative;

    z-index: ;

    -moz-border-radius:  5px 5px 5px;

    -webkit-border-radius:  5px 5px 5px;

    border-radius:  5px 5px 5px;

    -moz-box-shadow:  -2px 3px -2px rgba(, , , .);

    -webkit-box-shadow:  -2px 3px -2px rgba(, , , .);

    box-shadow:  -2px 3px -2px rgba(, , , .);

}

jq：

$(function(){

    $('#content').find("[id^='tab']").hide();//第一步全部隐藏

    $("#tabs li:first").attr("id","current");//默认第一个选项卡为选中

    $("#content #tab1").fadeIn();//显示第一个

    $('#tabs a').click(function(e)

    {

        e.preventDefault();//阻止默认动作

        if ($(this).closest("li").attr("id") == "current") { //判断哪个是否是活动的

            return;

        } else{

            $("#content").find("[id ^= 'tab']").hide();//隐藏全部的tab

            $("#tabs li").attr("id","");//去掉选中状态

            $(this).parent().attr("id","current");//点击的加上选中状态

            $('#' + $(this).attr('name')).fadeIn();//利用其name和tab的名字相同来显示哪个选项

        }

    })

});

js：

window.onload = function(){

    var content = document.getElementById('content');

    var list = content.childNodes;

    for (var i =  ; i< ; i+=) {

        list[i].style.display='none';

    }

 document.getElementById('tabs').childNodes[''].setAttribute("id","current");

 list[].style.display='block';

}

 function aclick(_this,num)

 {

       var tabsli = document.getElementById('tabs').childNodes;

     tabsli[].setAttribute("id","");

       var tabs = document.getElementsByName(_this.name);

    var content = document.getElementById('content');

    var list = content.childNodes;

    for (var i =  ; i< ; i+=) {

        list[i].style.display='none';

    }

     list[num].style.display='block';

 }

git地址：https://github.com/chenjinxinlove/jquser

演示地址：http://jquerytabs.applinzi.com/

巴特西

jquery简单插件到复杂插件（1）--tabs

最新文章

热门文章