【自创】傻瓜式tab选项卡切换代码

**

html：

**

<div style="width: 70%;margin:0 auto;height: 400px;">
    <ul class="nav">
        <li><a ref="menu_a" onclick="topNav(this)" class="nav_btn_active">菜单1</a></li>
        <li><a ref="menu_b" onclick="topNav(this)">菜单2</a></li>
        <li><a ref="menu_c" onclick="topNav(this)">菜单3</a></li>
        <li><a ref="menu_d" onclick="topNav(this)">菜单4</a></li>
        <li><a ref="menu_e" onclick="topNav(this)">菜单4</a></li>
    </ul>
    <div id="menu_a" class="panel">
        面板1
    </div>
    <div id="menu_b" class="panel">
        面板2
    </div>
    <div id="menu_c" class="panel">
        面板3
    </div>
    <div id="menu_d" class="panel">
        面板4
    </div>
    <div id="menu_e" class="panel">
        面板5
    </div>
</div>

**

css

**

* {
	margin:0;
	padding:0;
}
ol,ul,li {
	list-style:none;
}
.nav {
	height:40px;
	line-height:40px;
}
.nav li {
	float:left;
	width:20%;
}
.nav li a {
	display:block;
	text-align:center;
	cursor:pointer;
}
.nav li a:hover {
	background-color:red;
}
.panel {
	margin:0 auto;
	background-color:#CCCCCC;
	height:400px;
	text-align:center;
	font-size:30px;
}
.nav_btn_active {
	background-color:red;
}

**

js

**

$(document).ready(function() {
    $(".panel").hide();
    $("#menu_a").show();
});

function topNav(o) {
    $(".panel").hide();
    var ref = $(o).attr('ref');
    $("#" + ref).show();
    $(o).parent().parent().find("li a").removeClass('nav_btn_active');
    $(o).addClass('nav_btn_active');
}

**

效果

**