<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>切換欄</title>
<style>
.tab {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 44px;
line-height: 44px;
border-bottom: 1px solid #ff3c3c;
background-color: #eee;
}
.tab .item {
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
font-size: 14px;
text-align: center;
color: #333;
text-decoration: none;
}
.tab .cur {
height: 42px;
border-bottom: 2px solid #ff3c3c;
color: #ff3c3c;
}
.content {
background-color: #fff;
}
</style>
</head>
<body>
<div class="tab">
<a href="javascript:;" class="item cur">菜單一</a>
<a href="javascript:;" class="item">菜單二</a>
</div>
<div class="content">
<!-- 菜單一 內容塊 -->
<div class="lists">1111</div>
<!-- 菜單二 內容塊 -->
<div class="lists">2222</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(function () {
//頁面加載：菜單一 默認顯示
var itemIndex = 0;
$('.lists').eq(itemIndex).show().siblings('.lists').hide();
// 點擊切換菜單欄
$('.tab .item').on('click', function () {
var $this = $(this);
itemIndex = $this.index();
$this.addClass('cur').siblings('.item').removeClass('cur');
$('.lists').eq(itemIndex).show().siblings('.lists').hide();
});
});
</script>
</body>
</html>