精华内容
下载资源
问答
  • JavaScript实现tab栏切换

    2020-09-23 11:53:38
    JavaScript实现tab栏切换 核心思想:主要使用的是排他思想,即干掉所有人,只保留自己一个。 完整代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

    JavaScript实现tab栏切换

    核心思想:主要使用的是排他思想,即干掉所有人,只保留自己一个。
    案例分析:
    主要从两个方面考虑,一是tab栏的模块选项卡,二是下面的模块内容的变化。
    (1)在模块选项中,点击某一个,背景颜色发生变化,其余不变(排他思想),方法是修改对应的类名;
    (2)模块内容与模块选项内容一一匹配,随选项卡的变化而变化,将模块变化写在点击事件中;
    (3)重点:给模块选项中的所有li添加自定义属性,属性值从0开始编号,然后采用遍历索引号的方式,干掉所有的li,清除其中相应的类,只保留点击的这一个(排他思想)。
    (4)最后当点击某个li时,让对应序号的模块内容显示,其余隐藏(排他思想)。

    完整代码实现:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>tab栏切换</title>
        <style>
        /*清除元素默认的内外边距*/
        	* {
                margin: 0;
                padding: 0;
            }
            /*去掉列表(li)前面的小点*/
            li {
                list-style-type: none;
            }
            
            .tab {
                width: 978px;
                margin: 100px auto;
            }
            
            .tab_list {
                height: 39px;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            
            .tab_list li {
                float: left;
                height: 39px;
                line-height: 39px;
                padding: 0 20px;
                text-align: center;
                cursor: pointer;
            }
            
            .tab_list .current {
                background-color: #c81623;
                color: #fff;
            }
            
            .item {
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">首页</li>
                    <li>电视剧</li>
                    <li>电影</li>
                    <li>动漫</li>
                    <li>新闻</li>
                    <li>娱乐</li>
                </ul>
            </div>
            <!--tab栏内容区用块结构-->
            <div class="tab_con">
                <div class="item" style="display: block;">
                    首页模块内容
                </div>
                <div class="item">
                    电视剧模块内容
                </div>
                <div class="item">
                    电影模块内容
                </div>
                <div class="item">
                    动漫模块内容
                </div>
                <div class="item">
                    新闻模块内容
                </div>
    			<div class="item">
                    娱乐模块内容
                </div>
            </div>
        </div>
        <script>
            // 获取元素
            var tab_list = document.querySelector('.tab_list');
            var lis = tab_list.querySelectorAll('li');
            var items = document.querySelectorAll('.item');
            // for循环绑定点击事件
            for (var i = 0; i < lis.length; i++) {
                // 开始给小li 设置索引号  新设置一个index的属性值,i代表索引号
                lis[i].setAttribute('index', i);
                lis[i].onclick = function() {
                    // 1. 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式
    
                    // 干掉所有人 其余的li清除 class 这个类 ,遍历除了点击的这一个,将其中的类清空
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].className = '';
                    }
                    // 将current类赋给点击的这一个,保证tab切换后颜色发生变化
                    this.className = 'current';
                    // 2. 下面的显示内容模块,tab切换栏下的内容部分,首先获取属性值
                    var index = this.getAttribute('index');
                    console.log(index);
                    // 干掉所有人 让其余的item 这些div 隐藏
                    for (var i = 0; i < items.length; i++) {
                        items[i].style.display = 'none';
                    }
                    // 留下我自己 让对应的item 显示出来
                    items[index].style.display = 'block';
                }
            }
        </script>
    </body>
    
    </html>
    
    展开全文
  • JavaScript实现Tab栏切换

    2019-09-12 16:45:55
    JavaScript实现Tab栏切换 京东网页上,可以看到下面这种tab栏切换: 我们把模型抽象出来,实现一下。 举例引入:鼠标悬停时,current元素的背景变色 本段我们先举一个例子,因为这里用到了排他思想(先干掉 all...

    JavaScript实现Tab栏切换

    京东网页上,可以看到下面这种tab栏的切换:

    我们把模型抽象出来,实现一下。

    举例引入:鼠标悬停时,current元素的背景变色

    本段我们先举一个例子,因为这里用到了排他思想(先干掉 all,然后保留我一个)。对于理解tab切换,很有帮助。

    完整的代码实现:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            button {
                margin: 10px;
                width: 100px;
                height: 40px;
                cursor: pointer;
            }
            .current {
                background-color: red;
            }
        </style>
    </head>
    <body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    
    <script>
        //需求:鼠标放到哪个button上,改button变成黄色背景(添加类)
    
    
        var btnArr = document.getElementsByTagName("button");
        //绑定事件
        for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件,所以用到了for循环
            btnArr[i].onmouseover = function () {
                //【重要】排他思想:先把所有按钮的className设置为空,然后把我(this)这个按钮的className设置为current
                //排他思想和for循环连用
                for(var j=0;j<btnArr.length;j++){
                    btnArr[j].className = "";
                }
                this.className = "current";  //【重要】核心代码
            }
        }
    
        //鼠标离开current时,还原背景色
        for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件,所以用到了for循环
            btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时,就把按钮的背景色还原
                this.className = "";
            }
        }
    
    </script>
    
    </body>
    </html>
    

    代码解释:

    鼠标悬停时,current栏变色,这里用到了排他思想:先把所有按钮的className设置为空,然后把我(this)这个按钮的className设置为current,就可以达到变色的效果。核心代码是:

                //排他思想:先把所有按钮的className设置为空,然后把我(this)这个按钮的className设置为current
                //排他思想和for循环连用
                for(var j=0;j<btnArr.length;j++){
                    btnArr[j].className = "";
                }
                this.className = "current";
    

    实现的效果如下:

    tab切换:初步的代码

    代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            .box {
                width: 500px;
                height: 200px;
                border: 1px solid #ccc;
                margin: 50px auto;
                overflow: hidden;
            }
            ul {
                width: 600px;
                height: 40px;
                margin-left: -1px;
                list-style: none;
            }
            li {
                float: left;
                width: 101px;
                height: 40px;
                text-align: center;
                font: 600 18px/40px "simsun";
                background-color: pink;
                cursor: pointer;
            }
            span {
                display: none;
                width: 500px;
                height: 160px;
                background-color: yellow;
                text-align: center;
                font: 700 100px/160px "simsun";
            }
            .show {
                display: block;
            }
            .current {
                background-color: yellow;
            }
        </style>
    
        <script>
            window.onload = function () {
                //需求:鼠标放到上面的li上,li本身变色(添加类),对应的span也显示出来(添加类);
                //思路:1.点亮上面的盒子。   2.利用索引值显示下面的盒子。
    
                var liArr = document.getElementsByTagName("li");
                var spanArr = document.getElementsByTagName("span");
    
                for(var i=0;i<liArr.length;i++){
                    //绑定索引值(新增一个自定义属性:index属性)
                    liArr[i].index = i;
                    liArr[i].onmouseover = function () {
    
                        //1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
                        for(var j=0;j<liArr.length;j++){
                            liArr[j].className = "";
                            spanArr[j].className = "";
                        }
                        this.className = "current";
                        spanArr[this.index].className = "show"; //【重要代码】
                    }
                }
            }
        </script>
    </head>
    <body>
    
    <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>袜子</li>
            <li>帽子</li>
            <li>裤子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>袜子</span>
        <span>帽子</span>
        <span>裤子</span>
        <span>裙子</span>
    </div>
    
    </body>
    </html>
    

    实现效果如下:

    上方代码的核心部分是:

                for(var i=0;i<liArr.length;i++){
                    //绑定索引值(新增一个自定义属性:index属性)
                    liArr[i].index = i;
                    liArr[i].onmouseover = function () {
    
                        //1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
                        for(var j=0;j<liArr.length;j++){
                            liArr[j].className = "";
                            spanArr[j].className = "";
                        }
                        this.className = "current";
                        spanArr[this.index].className = "show"; //【重要代码】
                    }
                }
    
    

    这段代码中,我们是通过给 liArr[i]一个index属性:liArr[i].index = i,然后让下方的span对应的index也随之对应显示:spanArr[this.index].className = "show"

    这样做比较难理解,其实还有一种容易理解的方法是:给liArr[i]增加index属性时,通过attribute的方式,因为这种方式增加的属性是可以显示在标签上的。也就有了下面这样的代码:

                for(var i=0;i<liArr.length;i++){
                    //绑定索引值(自定义属性),通过Attribute的方式【重要】
                    liArr[i].setAttribute("index",i);
                    liArr[i].onmouseover = function () {
                        //3.书写事件驱动程序(排他思想)
                        //1.点亮盒子。   2.利用索引值显示盒子。(排他思想)
                        for(var j=0;j<liArr.length;j++){
                            liArr[j].removeAttribute("class");
                            spanArr[j].removeAttribute("class");
                        }
                        this.setAttribute("class","current");
                        spanArr[this.getAttribute("index")].setAttribute("class","show");
                    }
                }
    
    

    显示的效果是一样的,不同的地方在于,我们审查元素发现,li标签中确实新增了自定义的index属性:

    本段中,我们的目的已经达到了,不足的地方在于,本段中的代码是通过document获取的的标签,如果网页中有很多个这种tab选项卡,必然互相影响。

    为了多个tab栏彼此独立,我们就需要通过封装函数的方式把他们抽取出来,于是就有了下面的改进版代码。

    tab切换:改进版代码(函数封装)

    方式一:给current标签设置index值【推荐的代码】

    完整版代码实现:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            .box {
                width: 500px;
                height: 200px;
                border: 1px solid #ccc;
                margin: 50px auto;
                overflow: hidden;
            }
    
            ul {
                width: 600px;
                height: 40px;
                margin-left: -1px;
                list-style: none;
            }
    
            li {
                float: left;
                width: 101px;
                height: 40px;
                text-align: center;
                font: 600 18px/40px "simsun";
                background-color: pink;
                cursor: pointer;
            }
    
            span {
                display: none;
                width: 500px;
                height: 160px;
                background-color: yellow;
                text-align: center;
                font: 700 100px/160px "simsun";
            }
    
            .show {
                display: block;
            }
    
            .current {
                background-color: yellow;
            }
        </style>
    
        <script>
            window.onload = function () {
                //需求:鼠标放到上面的li上,li本身变色(添加类),下方对应的span也显示出来(添加类);
                //思路:1.点亮上面的盒子。   2.利用索引值显示下面的对应的盒子。
    
                //1、获取所有的box
                var boxArr = document.getElementsByClassName("box");
    
                //让每一个box都调用函数
                for (var i = 0; i < boxArr.length; i++) {
                    fn(boxArr[i]);
                }
    
                function fn(element) {
                    var liArr = element.getElementsByTagName("li");   //注意,是element获取事件源,不是document获取事件源
                    var spanArr = element.getElementsByTagName("span");
                    //2.绑定事件(循环绑定)
                    for (var i = 0; i < liArr.length; i++) {
                        //绑定索引值(新增一个自定义属性:index属性)
                        liArr[i].index = i;
                        liArr[i].onmouseover = function () {
                            //3.书写事件驱动程序(排他思想)
                            //1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
                            for (var j = 0; j < liArr.length; j++) {
                                liArr[j].className = "";
                                spanArr[j].className = "";
                            }
                            this.className = "current";
                            spanArr[this.index].className = "show"; //【重要】核心代码
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
    
    <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>袜子</li>
            <li>帽子</li>
            <li>裤子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>袜子</span>
        <span>帽子</span>
        <span>裤子</span>
        <span>裙子</span>
    </div>
    
    <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>袜子</li>
            <li>帽子</li>
            <li>裤子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>袜子</span>
        <span>帽子</span>
        <span>裤子</span>
        <span>裙子</span>
    </div>
    
    <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>袜子</li>
            <li>帽子</li>
            <li>裤子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>袜子</span>
        <span>帽子</span>
        <span>裤子</span>
        <span>裙子</span>
    </div>
    
    </body>
    </html>
    

    注意,通过函数fn的封装之后,我们是通过参数element获取元素,而不再是document了。这样可以达到“抽象性”的作用,各个tab栏之间相互独立。

    上方代码中,我们是通过给 liArr[i]一个index属性:liArr[i].index = i,然后让下方的span对应的index也随之对应显示:spanArr[this.index].className = "show"

    这样做比较难理解,根据上一段的规律,当然还有一种容易理解的方法是:给liArr[i]增加index属性时,通过attribute的方式,因为这种方式增加的属性是可以显示在标签上的。也就有了下面的方式二。

    方式二:通过attribute设置index的值

    基于上面方式一中的代码,我们修改一下js部分的代码,其他部分的代码保持不变。js部分的代码如下:

        <script>
            window.onload = function () {
                //需求:鼠标放到上面的li上,li本身变色(添加类),下方对应的span也显示出来(添加类);
                //思路:1.点亮上面的盒子。   2.利用索引值显示下面的对应的盒子。
    
                //1、获取所有的box
                var boxArr = document.getElementsByClassName("box");
    
                //让每一个box都调用函数
                for (var i = 0; i < boxArr.length; i++) {
                    fn(boxArr[i]);
                }
    
                function fn(element) {
                    var liArr = element.getElementsByTagName("li");   //注意,是element获取事件源,不是document获取事件源
                    var spanArr = element.getElementsByTagName("span");
                    //2.绑定事件(循环绑定)
                    for (var i = 0; i < liArr.length; i++) {
                        //绑定索引值(自定义属性)
                        liArr[i].setAttribute("index", i);
                        liArr[i].onmouseover = function () {
                            //3.书写事件驱动程序(排他思想)
                            //1.点亮盒子。   2.利用索引值显示盒子。(排他思想)
                            for (var j = 0; j < liArr.length; j++) {
                                liArr[j].removeAttribute("class");    //注意,这里是class,不是className
                                spanArr[j].removeAttribute("class");
                            }
                            this.setAttribute("class", "current");
                            spanArr[this.getAttribute("index")].setAttribute("class", "show");
                        }
                    }
                }
            }
        </script>
    

    不过,方式一的写法应该比方式二更常见。

    总结:通过函数封装的形式,可以保证各个tab栏之间的切换互不打扰。最终实现效果如下:

    我的公众号

    想学习代码之外的技能?不妨关注我的微信公众号:千古壹号(id:qianguyihao)。

    扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:

    展开全文
  • 主要为大家详细介绍了JavaScript实现tab栏切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • js实现tab栏切换效果

    2020-11-20 00:06:55
    本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js实现tab栏...
  • js实现tab栏切换

    2020-08-06 02:18:18
    <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...tab栏切换</title> <style> .tab { position: absolute; border: 1px solid #555555; /*width: 6.

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>tab栏切换</title>
        <style>
            .tab {
                position: absolute;
                border: 1px solid #555555;
                /*width: 650px;*/
                /*height: auto;*/
            }
            .tab_list {
                /*float: left;*/
                /*position: absolute;*/
                height: 70px;
                width: 650px;
                /*position: relative;*/
                padding: 0 0 0;
                border: solid #cccccc;
                margin: 0 auto;
                /*cursor: pointer;*/
                /*text-align: center;*/
                /*float: left;*/
            }
            .tab_list li{
                border: #555555 solid;
                list-style: none;
                float: left;
                height: 39px;
                line-height: 39px;
                padding: 0 20px;
                text-align: center;
                cursor: pointer;
            }
    
            .tab_list .current {
                background-color: #e64942;
                color: #cccccc;
            }
    
            .tab_con{
                /*float: ;*/
                /*padding-top: 50px;*/
                margin: 30px;
            }
            .item_info {
                padding: 20px 0 0 20px;
            }
    
            .item {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="tab_con">
                <div class="item" style="display: block">
                    商品介绍#########################
                </div>
                <div class="item">
                    规格与包装#######################
                </div>
                <div class="item">
                    售后保障#########################
                </div>
                <div class="item">
                    商品评价************************
                    &nbsp;&napprox;<br>******************
                    *****************
                </div>
                <div class="item">
                    手机社区#########################
                </div>
            </div>
        </div>
    <script>
        var lis=document.querySelectorAll('li');
        var items=document.querySelectorAll('.item');
        for (var i=0;i<lis.length;i++){
            lis[i].setAttribute('index',i);
            lis[i].onclick=function () {
                for (var i=0;i<lis.length;i++){
                    lis[i].className='';
                    items[i].style.display='none';
                }
                this.className='current';
                var index=this.getAttribute('index');
                console.log(index);
                items[index].style.display='block';
            }
        }
    </script>
    </body>
    </html>
    
    展开全文
  • 原生JS实现TAB栏切换

    千次阅读 2017-06-30 00:42:05
    之前上传了一个jquery实现tab栏切换的博客,这个是原生js实现tab栏切换的案例,不多说直接上代码!同样复制粘贴就能看到效果哦! <!DOCTYPE html> <title></title> .Box{ width: 2

    之前上传了一个jquery实现tab栏切换,这个是原生js实现tab栏切换的案例,不多说直接上代码!

    同样复制粘贴就能看到效果哦!

    
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .Box{
                width: 240px;
                border: 1px solid #000;
                margin:100px auto;
                padding:20px;
            }
            .con{
                width: 100%;
                height: 200px;
                background-color: #cccccc;
                border: 1px solid #000;
                margin-top:10px;
                display:none;
            }
            .current{
                background-color: pink;
            }
        </style>
    </head>
    <body>
    <div class="Box" id="box">
        <button class="current" >按钮1</button>
        <button >按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <div class="con" style="display:block">内容1</div>
        <div class="con">内容2</div>
        <div class="con">内容3</div>
        <div class="con">内容4</div>
    </div>
    <script>
    
        // 首先要获得所有的按钮
        var box = document.getElementById('box');
        var btns = document.getElementsByTagName('button');
        var divs = box.getElementsByTagName('div');
        for(var i=0;i<btns.length;i++){
            var btn = btns[i];
            btn.index = i;// 给每个按钮添加一个自定义属性,用来存储当前的索引
            btn.onclick = function(){
    
                for(var j=0;j<btns.length;j++){
                    btns[j].className = '';
                }
                this.className = 'current';
                for(var k = 0;k<divs.length;k++){
                    divs[k].style.display = 'none';
                }
                divs[this.index].style.display = 'block';
            }
        }
    </script>
    </body>
    </html>
    
    展开全文
  • 原生js实现tab栏切换

    2019-06-01 08:55:06
    tab切换
  • js实现Tab栏切换

    千次阅读 2019-05-19 15:06:41
    主要用到排他思想,另外给tab每个li标签添加一个index自定义属性(还需要用js获取) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  • js实现tab栏切换效果(一)

    千次阅读 2017-01-25 17:17:02
    利用javascript实现tab栏切换效果, 其中原理“置之死地而后生”,先把所有人干掉,自己再复活。 直接上代码:<!DOCTYPE html> <title></title> *{
  • js实现tab栏切换,并实现增,删,改,查 html样式 <main> <h4>Js 面向对象 动态添加标签页</h4> <div class="tabsbox" id="tab"> <!-- tab 标签 --> <nav class="fisrstnav"> ...
  •  在日常生活中很多时候我们都会碰到tab栏切换效果,类似于下面的 图一 这种效果事项的办法有很多很多,今天我们来看看其中的一种。 需求分析 点击上面的tab栏 下面的内容跟着改变 点击tab栏以后点击的哪个会变...
  • 原生js实现tab栏切换效果

    多人点赞 2021-04-06 17:43:25
    首先我们来看一下原生js实现的效果 下面就开始直接上代码了 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
  • tab栏切换 有2个大的模块:上面的模块选项卡(tab_list)、下面的模块内容(tab_con) <div class="tab"> <!-- 下面的模块内容会与上面的模块选项卡变化而变化,所以 两者的数量应该一一对应,相匹配。 -...
  • 原生js实现tab栏切换功能

    千次阅读 2019-05-10 09:21:30
    这个tab栏我用了两个排他功能来实现的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ marg...
  • Javascript实现tab栏切换,并在下方显示不同的内容 正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教 我们在逛网页的过程当中,通常会看见一排选择框,我们点击不同的选择框,那么便会出来...
  • methods:{ //点击的时候改变current handleClick(){ this.current = } }
  • $('.tab_list li').click(function () { //1、当前小li添加currt类 其他兄弟去除currt类 $(this).addClass('currt').siblings().removeClass('currt'); // 2、点击的同时得到当前li的索引号 var index = $(this...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,459
精华内容 18,983
关键字:

js实现tab栏切换