js，jQ实现简单选项卡

html

<div class="header1">
	<div class="header-nei" id="header-nei">
		<div class="neiClick">第一场</div>
		<div>第二场</div>
		<div>第三场</div>
		<div>第四场</div>
		<div>最终排名</div>
	</div>
</div>
<div class="header2">
	<div class="header-nei2" id="header-nei2">
		<div class="neiClick2">一区</div>
		<div>二区</div>
		<div>三区</div>
		<div>四区</div>
		<div>五区</div>
	</div>
</div>

CSS（样式可能有点丑自己修改一下）

.header-nei div,.header-nei2 div{
	background: #5C5C5C;
	margin-left: -2%;
	width: 20%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 14px;
	color: #FFFFFF;
	display: inline-block;
}
.header-nei .neiClick{
	background: #ecab59;
}
.header-nei2 div{
	background: #ecab59;
	display: none;
}
.header-nei2 .neiClick2{
	display: block;
	width: 8%;
	margin: 0 10%;
	color: #ecab59;
	background: #FFFFFF;
	border-bottom: 1px solid #ECAB59;
}

JS

var btn = document.getElementById("header-nei")
var nDiv = btn.getElementsByTagName("div")
var btn2 = document.getElementById("header-nei2")
var nDiv2 = btn2.getElementsByTagName("div")

for (var i = 0;i<nDiv.length;i++) {
	nDiv[i].index = i		//为标题div添加index
	/*循环遍历添加点击事件*/
	nDiv[i].onclick = function(){
		for (var j = 0;j<nDiv.length;j++) {
			/*循环遍历将标题div的样式移除*/
			nDiv[j].className = ''
		}
		/*将neiClick样式添加到点击的那个div上*/
		this.className="neiClick";
		var num=this.index;		//将index保存到num中
		for (var k = 0;k<nDiv2.length;k++){
			/*循环遍历将内容div的样式移除*/
			nDiv2[k].className=""
		}
		//根据索引设置内容div的类为 neiClick2 将他显示出来
		nDiv2[num].className = "neiClick2"
	}
}

　jQ实现选项卡

　　HTML

<div class="nav">
    <div class="nav_nei">
        <div class="neiClick">中式古典</div>
        <div>欧式浪漫</div>
        <div>美式田园</div>
    </div>
</div>
<ul id="about_cont">
    <li class="cont_block">
        1
    </li>
    <li>
        2
    </li>
    <li>
        3
    </li>        
</ul>

　　CSS（关键样式）

.nav_nei .neiClick{
    color: #FBBE40;
    border-bottom: 1px solid #FBBE40;
}
#about_cont .cont_block{
    display: block;
}

　　JS

<script type="text/javascript">
            $(function ()
            {
                //使用后代选择器.nav_nei div，选中导航元素，并给他们添加click方法
            　　$(".nav_nei div").click(function ()
            　　{
            　　　　//使用this关键字选中当前单击的对象，增加样式neiClick，并使用siblings方法找到该对象的所有同级元素，移除样式neiClick
            　　　　$(this).addClass("neiClick").siblings().removeClass("neiClick");
                    //使用后代选择器.nav_nei div，选中内容区元素，全部移除样式cont_block，再使用eq方法找到导航区li对象的索引数字，同时作为内容区的索引，增加样式cont_block
                    var index = $(this).index();
                    $("#about_cont li").removeClass("cont_block").eq(index).addClass("cont_block");
            　　});
            });
</script>