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

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