Kane's Blog

做页面经常会遇到需要做tabs切换效果。而且每次的Tabs数目可能不一样。没用jquery的tabs插件.. 所以就自己写了一个页面上无脚本，通过绑定来实现无限个tabs的方法。

$(document).ready(function(){

		var objli=$("#ultab >li"); //声明tabs的li为数组
		var objtabs=$("#tabs > div[class='content']");//声明tabs的内容div为数组

			objli.each(function(){

				//给每个li绑定click事件
				$(this).bind("click",function(){

					//每个li 去除当前
					objli.each(function(){
							$(this).removeClass("current");
						});

					//每个tabs隐藏
					objtabs.each(function(){
							$(this).hide();
						});

				//当前点击的li加上css
				$(this).addClass("current");

				//获取当前点击的li的name属性，name属性用于传递需要显示tab对象
				var curtab=$(this).attr("name");
				$("#"+curtab).show();

			})

		})

	});

  <ul id="ultab">
		<li class="current" name="tab_1"><a>Title1</a></li>
		<li name="tab_2"><a>Title2</a></li>
		<li name="tab_3"><a>Title3</a></li>
		<li name="tab_4"><a>Title4</a></li>
		<li name="tab_5"><a>Title5</a></li>
	</ul>

	<div id="tabs">

		<div id="tab_1" class="content">
			tab1
		</div>

		<div id="tab_2" class="content" style="display:none;">
			tab2
		</div>

		<div id="tab_3" class="content" style="display:none;">
			tab3
		</div>

		<div id="tab_4" class="content" style="display:none;">
			tab4
		</div>

		<div id="tab_5" class="content" style="display:none;">
			tab5
		</div>

	</div>