首先介绍下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