原生javascript实现tab切换效果的代码

Tab切换是网页制作中常用的效果，通过jquery很容易实现，使用原生javascript代码则稍微有点繁锁。

HTML代码：

<div id="tabmenu">
	<span class="current>普通会员</span>
	<span>超级会员</span>
</div>
<div id="tabbox">
	<div class="item">
		普通会员权限
	</div>
	<div class="item">
		超级会员权限
	</div>
</div>

CSS代码：

#tabmenu .current {color:#f00;}
#tabbox .item {display:none;}
#tabbox .item:first-child {display:block;}

javascript代码：

var tabMenu = document.getElementById('tabmenu');
var tabMenuSpan = tabMenu.getElementsByTagName('span');
var tabBox = document.getElementById('tabbox');
var tabBoxItem = tabBox.getElementsByClassName('item');
for(var i=0; i<tabMenuSpan.length; i++){ //遍历span
	tabMenuSpan[i].index = i; //添加一个自定义属性index
	tabMenuSpan[i].onclick = function(){ //原生JS点击事件
		var index = this.index; //获取刚刚添加的自定义属性值
		for(var b=0; b<tabBoxItem.length; b++){ //遍历item
			if(b==index){ //点击后要显示的item
				tabMenuSpan[b].className = 'current';
				tabBoxItem[b].style.display = 'block';
			}else{ //其余的item隐藏
				tabMenuSpan[b].className = '';
				tabBoxItem[b].style.display = 'none';
			}
		}
	}
}

附：jQuery实现代码

$(function(){
	$('#tabmenu span').click(function(){
		$(this).addClass('current').siblings().removeClass('current');
		$('#tabbox .item').eq($(this).index()).show().siblings().hide();
	});
});

jQuery版本需要引入jQuery.js库文件