案例总结：基本的选项卡效果

首先介绍下html结构

Css就不写了,重点讲下脚本的思路

1.Jquery实现选项卡效果

思路：
(1).当按钮按下的时候记下当前按钮的索引值，这里注意下.index()(注意javascript是没有这个方法的，注意比较记一下按钮按下的时候如何用javascript记下当前按钮的索引值）
(2)．当前按钮加上激活状态的class，他的兄弟级元素移除激活状的class,这里用到了.siblings ()(注意javascript是没有这个方法的，注意比较记一下如何用javascript实现）
(3).与此同时，让内容部分与当前按钮序列号相同的显示，其余消失

$(document).ready(function(){ 
    $(".tab li").click(function(){ 
    var index=$(this).index();
    $(this).addClass("on")
           .siblings().removeClass("on");//切换选中的按钮高亮状态                  
    $(".tabcont>li").eq(index).show()
                      .siblings().hide();   //在按钮选中时在下面显示相应的内容，同时隐藏不须要的框架内容     
    });
    $(".tab li").eq(0).attr("class", "on");
    $(".tabcont>li").eq(0).show();
})

2.jquery函数传参实现选项卡效果

在同一个页面上或者一个整站中，咱们不可能只用到一个选项卡，为了代码的复用，也为了避免用一次次重复写那些类似的代码，咱们能够把上述代码写成函数方法，用函数传参的方式来调用它。
代码以下：

<script type="text/javascript">
function tabs(state,control,show){//control为选项卡导航的class，show为选项卡内容的class，state为动做状态，如：click，onmouseover......
    $(control + "> li").on(state, function() {       
        $(this).addClass("on").siblings().removeClass("on");
        var index=$(this).index();   
        $(show + "> li").eq(index).show().siblings().hide(); 
    })
    $(control + "> li").eq(0).attr("class", "on");
    $(show + "> li").eq(0).show();
}
tabs("mouseover",".tab",".tabcont");//调用函数//调用函数
</script>

3.js实现选项卡效果

思路：
(1).首先是要获取须要的元素
(2)．要知道选项卡的导航按钮和内容是一一对应的关系，咱们能够用一个for循环，这样能够获得两个数组，
tabtit[i].index=i;//自定义.index属性记录数组下标
(3)． 上面咱们已经自定义一个属性来记录数组下标，那咱们点击按钮时当前按钮的索引就是this.index
延伸：这就是上文咱们说到要注意的点，要注意哦。
Jquery：点击时，索引值就是$(this).index();
Javascript：用一个for循环，自定义.index属性记录数组下标 tabtit[i].index=i;
而后点击时，索引值就是this.index
(4)．当前按钮加上激活状态的class，其余兄弟级元素移除激活状的class，让内容部分与当前按钮序列号相同的显示，其余消失。
注意javascript是没有.siblings ()这个方法的，咱们要如何实现呢？
方法：
1)用for循环取消全部的按钮激活状态class，让每个内容部分都隐藏。
2)当前按钮class设为激活状态，按钮对应索引号的内容显示

具体代码：

<script type="text/javascript">
    //获取元素
    var tab=document.getElementById("tab");
    var tabtit=tab.getElementsByTagName("li");
    var cont=document.getElementById("tabcont");
    var conttit=cont.getElementsByTagName("li");
    var tabnum=tabtit.length;
    
    for(i=0;i<tabnum;i++){
        tabtit[i].index=i;//自定义.index属性记录索引值
        tabtit[i].onclick=function() {
            var j=this.index;//用j表示当前按钮索引
            for(i=0;i<tabnum;i++){
               tabtit[i].className="";
               conttit[i].style.display = 'none'; 
            }
            this.className="on";
            conttit[j].style.display = 'block';             
        }               
    }
    tabtit[0].setAttribute("class", "on");
    conttit[0].style.display = 'block'; 
</script>

4.js函数传参实现选项卡效果

<script type="text/javascript">
    function tab(control,show,state){
        var tab=document.getElementById(control);
        var tabtit=tab.getElementsByTagName("li");
        var cont=document.getElementById(show);
        var conttit=cont.getElementsByTagName("li");
        var tabnum=tabtit.length;
        
        for(i=0;i<tabnum;i++){
            tabtit[i].index=i;
            tabtit[i][state]=function() {
                var j=this.index;
                for(i=0;i<tabnum;i++){
                   tabtit[i].className="";
                   conttit[i].style.display = 'none'; 
                }
                this.className="on";
                conttit[j].style.display = 'block';             
            }               
        }
        tabtit[0].setAttribute("class", "on");
        conttit[0].style.display = 'block';     
    }
    tab("tab","tabcont","onclick")//调用函数    
</script>

注意：要点：tabtit[i][e]由于传值的时候是字符串，若是直接写的话就是tabtit[i]."onclick"这样话是执行不了的，tabtit[i]["onclick"]这样执行没问题。

一切都是套路，思路理顺了，其实也就不难了。

本文为原创，如需转载请注明转载地址，谢谢合做！
本文地址：http://www.cnblogs.com/wanghuih/p/6323196.html