Tab切换效果实现-优快云博客

本文介绍了一种使用HTML、CSS和JavaScript实现的Tab切换效果。通过简单的DOM操作和样式更改完成不同内容面板之间的切换，适用于网页应用程序中组织和展示多个相关内容组。

思路：上面的tab,给类名，和下面内容展示的类名有一定的规律,
实现条件，jquery,ember框架。

<style>
    .current{
        color:#fff;
        background:red;
    }
<style/>
<ul>
    <li class='current boxtestTops' onclick={{action 'tabshow' 'boxtestTop'}}>第一个tab<li/>
    <li class='boxtestCenters' onclick={{action 'tabshow' 'boxtestCenter'}}>第一个tab<li/>
    <li class='boxtestRights' onclick={{action 'tabshow' 'boxtestRight'}}>第一个tab<li/>
<ul/>

<div class="boxtestTop"><div/>
<div class="boxtestCenter"><div/>
<div class="boxtestRight"><div/>

js点击逻辑
tabshow(type){
    $('.'+type+'s').addClass('current').siblings().removeClass('current');
       $('.'+type).show().siblings().hide()
}

直接上代码：

let titles = $('.titles').find('ul li a');
        let sps = $('.content').find('ul li');
        var tabes = function () {
            return {
                tabCard: function (x, y) {
                    for (var i = 0; i < x.length; i++) {
                        x[i].index = i;
                        x[i].onclick = function () {
                            for (var i = 0; i < x.length; i++) {
                                x[i].className = '';
                                y[i].className = '';
                            }
                            this.className = 'yun';   //这个是点击的导航，依次切换，若切换存在样式可以在这里定义class名yun,
                            y[this.index].className = 'show'; //这个是切换的导航页面，哪个显示，class名为show(页面布局哪个默认显示，class名为show);
                        }
                    }
                }

            }
        }
        tabes().tabCard(titles, sps); //调用，第一个参数，获取点击切换的所有导航页签，第二个参数，切换的所有页面

第二种实现方式

var titList = {
        "names":{
            'n1': '徐绽',
            'n2': '李静',
            'n3': '邓小燕',
            'n4': '胡涛',
            'n5': '李娜',
            'n6': '屈海亮',
            'n7': '张舒'
        },
        "jiob1": {
            't1': '考研英语辅导界明星专家',
            't2': '英语讲师',
            't3': '英语语言文学硕士',
            't4': '英语讲师',
            't5': '英语语言文学硕士',
            't6': '英语讲师',
            't7': '学府考研数学辅导老师'
        },
        "content": {
            'p1': '学府考研湖北分校校长，徐绽英语全程规划系列图书主编。\
                    主讲考研英语词汇、阅读理解、写作、翻译和英语四六级。\
                    授课风趣幽默，极富有激情，有的放矢，挥洒自如，直击要害，\
                    让学员在开心而轻松的课堂氛围中掌握知识点，满载而归，轻松面对应试。\
                    深受广大考研学子的喜爱，多年的辅导经验与成熟的课程体系迄今为止已帮助数十万考研学子实现考研英语的高分梦想，\
                    是同学们心中当之无愧的绽女神。',
            'p2': '英语语言文学硕士，英语专业八 级。从事考研英语教学多年，教学\
                    经验丰富，课堂氛围活跃，善于启发学生思考。熟悉考研重难点及出\
                    题规律，擅长考研英语词汇以及阅读理解的讲授。',
            'p3': ' 澳大利亚纽卡斯尔大学应用语言学及西悉尼大学翻译学双硕士。英语从教经验丰富，\
                    深黯考研英语测试原理和考点体系，秉承结果导向教学理念，授课环环相扣，细致全面，直击学生备考的盲点与痛点。',
            'p4': ' 新一代考研领军人物，对考研数学试卷的出题规律和特点颇有研究。讲课热情澎湃，幽默风趣。',
            'p5': ' 学府考研辅导名师，教学经验丰富，善于因材施教，细致入微，善于激发学生的学习兴趣。',
            'p6': '武汉大学应用数学博士，从事高等数学、线性代数的教学工作十余年，连续多年参加考研数学的阅卷工作，熟悉考生弱点与考试难点。\
                    授课认真严谨，针对性强。'
        },
        enter:function(){
            var that = $(this);
            var boxs = $('.teacher_pic div');
            boxs.each(function(index){
                var _this = $(this);
                _this.mouseenter(function(){
                   switch(index){
                       case 0 : $('.names_n').text(that[0].names.n1);$('.company').text(that[0].jiob1.t1);$('.content_info').text(that[0].content.p1);
                       break;
                       case 1: $('.names_n').text(that[0].names.n2);$('.company').text(that[0].jiob1.t2);$('.content_info').text(that[0].content.p2);
                       break;
                       case 2: $('.names_n').text(that[0].names.n3);$('.company').text(that[0].jiob1.t3);$('.content_info').text(that[0].content.p3);
                       break;
                       case 3: $('.names_n').text(that[0].names.n4);$('.company').text(that[0].jiob1.t4);$('.content_info').text(that[0].content.p4);
                       break;
                       case 4: $('.names_n').text(that[0].names.n5);$('.company').text(that[0].jiob1.t5);$('.content_info').text(that[0].content.p5);
                       break;
                       case 5: $('.names_n').text(that[0].names.n6);$('.company').text(that[0].jiob1.t6);$('.content_info').text(that[0].content.p6);
                       break;
                       case 6: $('.names_n').text(that[0].names.n7);$('.company').text(that[0].jiob1.t7);$('.content_info').text(that[0].content.p7);
                       break;
                   }
                })
            })
        }
        //获取div,遍历，找到index，使用switch
    }


.uls li{
        border:1px solid #000;
        width:50px;
        height:35px;
        line-height:35px;
        text-align:center;
        float: left;
        list-style:none;
        cursor:pointer;
    }
    .uls:after{
        content:'';
        clear:both;
        display:block;
    }
    .tab>p{
        display:none;
        cursor:pointer;
    }
    .active{
        background:limegreen;
    }

<ul class="uls">
    <li class="active" index="0">首页</li>
    <li index="1">个人</li>
    <li index="2">搜索</li>
    <li index="3">我的</li>
</ul>
<div class="tab">
    <p style="display:block">页面11111111111111首页</p>
    <p>页面222222222222222个人</p>
    <p>页面333333333333333搜索</p>
    <p>页面444444444444444我的</p>
</div>

var lis = document.getElementsByTagName('li');
var tabs = document.querySelectorAll('p');
for(var i = 0;i<lis.length;i++){
    lis[i].index = i;
    lis[i].onclick = function(){
        for(var j = 0;j<lis.length;j++){
            lis[j].className = ""
        }
        for(var k = 0;k<tabs.length;k++){
            tabs[k].style.display = 'none'
        }
        lis[this.index].className = 'active';
        tabs[this.index].style.display = 'block'
    }
}


3.使用jquery--
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab-JQ</title>
    <style>
        * {margin: 0; padding: 0; list-style: none;}
        #wrap {width: 600px; margin: 100px auto 0; overflow: hidden;}
        #tit {height: 30px;width: 600px;}
        #tit span {float: left; height: 30px; line-height: 30px; width: 200px; font-size: 20px; text-align: center; color: #ccc;background: green;}
        #con li{display: none; height: 200px; width: 600px; background: pink;font-size: 100px;line-height: 200px;text-align: center;}
        #tit span.select {background: red; color: #ccc;}
        #con li.show {display: block;}
    </style>
    <script src='js/jquery-3.1.0.min.js'></script>
</head>
<body>
    <div id="wrap">
        <div id="tit">
            <span class="select">标题1</span>
            <span>标题2</span>
            <span>标题3</span>
        </div>
        <ul id="con">
            <li class="show">内容111</li>
            <li>内容222</li>
            <li>内容333</li>
        </ul>
    </div>
    <script>
        $('#tit span').click(function() {
            var i = $(this).index();//下标第一种写法
            //var i = $('tit').index(this);//下标第二种写法
            $(this).addClass('select').siblings().removeClass('select');
            $('#con li').eq(i).show().siblings().hide();
        });
    </script>
</body>
</html>
具体访问：https://www.cnblogs.com/handsomehan/p/5893655.html

tab切换