jquery tabs选项卡切换demo

<!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>