js tab选项卡效果练习

作者: 玲珑花 | 来源:发表于2017-10-24 11:14 被阅读0次

js tab选项卡效果练习
JS实现tab选项卡效果
学习记录：简单的焦点图轮播效果
vue-Element UI Tab选项卡从子页跳回选项卡问题
原生JS实现Tab切换效果和模态框效果
Vue实现选项卡效果
react-13-JSX-for循环-选项卡
CSS 效果 | tab 选项卡
tab栏封装
1.9 电影

index.html

<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="style.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="tab.js"></script>
    </head>
    
    <body>
    
    
    <div class="tab-node">
        <div class="tab-head">
            <div class="tab-head-item tab-head-player">江南</div>
            <div class="tab-head-item">凉州词</div>
            <div class="tab-head-item">王翰《凉州词》1</div>
            <div class="tab-head-item">王翰《凉州词》2</div>
            <div class="tab-head-item">王翰《凉州词》3</div>
        </div>
        <div class="tab-body">
            <div class="tab-body-item tab-body-player">
                汉乐府《江南》<br/> 江南可采莲，<br/>莲叶何田田。<br/>鱼戏莲叶间。<br/>鱼戏莲叶东，<br/>鱼戏莲叶西，<br/>鱼戏莲叶南，<br/>鱼戏莲叶北。 
            </div>
            <div class="tab-body-item">
                王之涣《凉州词》<br/> 黄河远上白云间，<br/>一片孤城万仞山。<br/>羌笛何须怨杨柳，<br/>春风不度玉门关。 
            </div>
            <div class="tab-body-item">
                王翰《凉州词》1<br/>  葡萄美酒夜光杯，<br/> 欲饮琵琶马上催。<br/> 醉卧沙场君莫笑，<br/> 古来征战几人回？ 
            </div>
            <div class="tab-body-item">
                王翰《凉州词》2<br/>  葡萄美酒夜光杯，<br/> 欲饮琵琶马上催。<br/> 醉卧沙场君莫笑，<br/> 古来征战几人回？ 
            </div>
            <div class="tab-body-item">
                王翰《凉州词》3<br/>  葡萄美酒夜光杯，<br/> 欲饮琵琶马上催。<br/> 醉卧沙场君莫笑，<br/> 古来征战几人回？ 
            </div>
        </div>      
    </div>
    </body>
</html>

tab.js

$(function(){
    //添加点击监听事件
    $(".tab-head-item").on('click',function(){
        tab_onclick(this,$(this).index());
    });
});

function tab_onclick(e,index){  
    $(".tab-node .tab-body .tab-body-item").removeClass('tab-body-player');
    $(".tab-node .tab-head .tab-head-item").removeClass('tab-head-player'); 
    
    $($(".tab-node .tab-body .tab-body-item").get(index)).addClass('tab-body-player');
    $($(".tab-node .tab-head .tab-head-item").get(index)).addClass('tab-head-player');
    
}

style.css

body{font-family:微软雅黑;font-size:1rem;}
.tab-node{border:solid 1px #ddd;padding:5px;box-shadow: 1px 1px 5px #ddd;}

.tab-node .tab-head {}
.tab-node .tab-head .tab-head-item{display:inline-block;margin-top: 8px;padding: 10px 5px;box-shadow:1px 1px 3px #ddd;background-color:#fcfcfc;min-width:4rem;}
.tab-node .tab-head .tab-head-item:hover:not(.tab-head-player){background-color:#F1F1F1;}
.tab-node .tab-head .tab-head-item{cursor:pointer;}
.tab-node .tab-head  .tab-head-player{color:#42CFFD;background-color:#fff;cursor:Default;}

.tab-node .tab-body{padding:10px;}
.tab-node .tab-body .tab-body-item{display:none;opacity:0;}
.tab-node .tab-body .tab-body-player{display:block;opacity:1;}

Paste_Image.png