<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项tabs切换</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
</head>
<style>
html,body{font-size:62.5%}
.tab-a {
display: inline-block;
text-align: center;
border-bottom: 3px solid transparent;
color: #343;
font: menu;
font-size: 1.4rem;
width:30%;
padding:5px;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.tab .active {
border-bottom-color: #019EE4;
color: #019EE4;
}
.panel {
padding: 15px 0;
}
.panel div {
display: none;
width:100%;
}
.panel .active {
display: inline-block;
}
</style>
<body>
<div id="tab" class="tab">
<a href="javascript:" class="tab-a active">tab1</a>
<a href="javascript:" class="tab-a">tab2</a>
<a href="javascript:" class="tab-a">tab3</a>
</div>
<div id="panel" class="panel">
<div class="tabText active">内容框1</div>
<div class="tabText">内容框2</div>
<div class="tabText">内容框3</div>
</div>
<script src="https://code.jquery.com/jquery-3.0.0-beta1.js"></script>
<script>
var elAs = $('#tab a'), elTabs = $('#panel .tabText');
// 选项卡点击行为
elAs.each(function(index) {
$(this).data('index', index).click(function() {
var target = elTabs.eq($(this).data('index'));
// 选项卡UI
$(this).addClass('active').siblings('a').removeClass('active');
// 面板显隐
target.addClass('active').siblings('.tabText').removeClass('active');
});
});
</script>
</body>
</html>http://www.savh.cn/thread-156.htm
转载请注明:Savh.Cn 发表
