选项卡切换（可优化使用下标）

html

	<header>
		<div id="aa" class="blo">1111</div>
		<div id="bb">222</div>
		<div id="cc">333</div>
		<div id="dd">444</div>
	</header>
	<ul>
		<li class="act">
			<a href="#aa">1111111</a>
		</li>
		<li>
			<a href="#bb">22222222222</a>
		</li>
		<li>
			<a href="#cc">333333333333</a>
		</li>
		<li>
			<a href="#dd">4444444444</a>
		</li>
	</ul>

css

	.act {
		color: red;
	}
	
	header>div {
		display: none;
	}
	
	header .blo {
		display: block;
	}
	
	.blo {
		display: block;
	}

script

	tabs("ul", "click", "li a", "act", "blo");

	function tabs(box, event, child, eclass, eidclass) {
		$(box).on(event, child, function(e) {
			e.preventDefault();
			$(this).parent().addClass(eclass).siblings().removeClass(eclass);
			$($(this).attr("href")).addClass(eidclass).siblings().removeClass(eidclass);
		});
	}