htm代碼：

<div>
<!-- tap切換 -->
<ul class="tab-g clearfix">
<li class="tab-gn active-gn">tap1</li>
<li class="tab-gn">tap2</li>
<li class="tab-gn">tap3</li>
</ul>
</div>
<!-- main-gn內的內容是切換的內容 -->
<div class="bottom clearfix">
<div class="products">
<div class="main-gn selected-gn"><img src="http://www.jq22.com/img/cs/500x300a.png" ><br>
內容一</div>
<div class="main-gn"><img src="http://www.jq22.com/img/cs/500x300b.png" ><br>
內容二</div>
<div class="main-gn"><img src="http://www.jq22.com/img/cs/500x300c.png" ><br>
內容三</div>
</div>
</div>

css代碼：

.tab-g {
border-bottom:0;
height:36px;
}
.tab-g li {
list-style:none;
float:left;
height:34px;
margin-right:20px;
color:#909090;
line-height:34px;
text-align:center;
cursor:pointer;
}
.tab-g li.active-gn {
color:#50B400;
border-bottom:3px solid #50B400;
}
.bottom .products {
height:476px;
}
.bottom .products .main-gn {
display:none;
}
.bottom .products .main-gn.selected-gn {
display:block;
}

js代碼：

$(function() {

// 國內旅遊
//1. 給li註冊mouseenter事件
$(".tab-gn").mouseenter(function() {
//2. 讓當前li添加active類，並且讓其他的li移除active類
$(this).addClass("active-gn").siblings().removeClass("active-gn");
//3. 讓對應下標的div添加selected，並且讓其他div移除selected類
var idx = $(this).index();
$(".main-gn").eq(idx).addClass("selected-gn").siblings().removeClass("selected-gn");
});
})

簡單tab切換代碼