js实现tab栏切换制作

本文实例为大家分享了js实现tab栏切换制作的具体代码，供大家参考，具体内容如下

效果：

思想：

1.点击每个tab时。要先用排他思想，使得所有li不加上背景，再让点击的tab加上某个类。

2.上面的tab与下面显示内容的页面是一一对应的。因此，可以使用自定义属性，使tab加上一个index索引，这样就能知道每次点击的是哪一个tab了。

3.最后仍然使用排他思想，当点击tab时，先让所有的内容都不显示，再让对应的内容进行显示。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab切换栏的制作</title>
    <style>
 
        *{
            padding: 0;
            margin: 0;
        }
        .head{
            width: 1000px;
            height: 30px;
            background-color: pink;
            margin: 10px auto;
            
        }
        ul{
            width: 100%;
            height: 100%;
        }
        li {
            display: inline-block;
            width: 100px;
            height: 100%;
            list-style: none;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }
        .bg {
            color: white;
            background-color: red;
        }
        .item {
            display: none;
        }
    </style>
</head>
<body>
    <div class="head">
        <ul>
            <li>商品详情</li>
            <li>商品详情</li>
            <li>商品详情</li>
            <li>商品详情</li>
            <li>商品详情5</li>
        </ul>
        <div class="detail">
            <div class="item">item1</div>
            <div class="item">item2</div>
            <div class="item">item3</div>
            <div class="item">item4</div>
            <div class="item">item5</div>
        </div>
        <script>
            var lis = document.querySelectorAll('li');
            // 鼠标经过时，li加入className，同时让其他li去掉该类。
            // 绑定事件
            var detail = document.querySelector('.detail');
            var items = detail.querySelectorAll('.item');
            for(var i=0;i<lis.length;i++){
                lis[i].setAttribute('index',i);
                var index;
                lis[i].onclick = function(){
                    for(var j=0;j<lis.length;j++){
                        lis[j].className='';
                        items[j].style.display = 'none';
                    }
                    this.className='bg';
                    index = this.getAttribute('index');
                    
                    items[index].style.display='block';
                }
 
            }

        </script>
    </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现Tab栏切换的两种方式案例详解

    面向过程的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic

  • JS实现简单Tab栏切换案例

    JS实现简单Tab栏切换案例

    本文实例为大家分享了JS实现简单Tab栏切换的具体代码,供大家参考,具体内容如下 要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选项卡,默认会有一个被选中: 下面的盒子也包含了 5个 div 模块,模块内容与上面的选项一一对应,当前默认的只有第一个 div会被显示出来. 实现思路: 点击切换选项卡部分 Tab 栏切换有2个大的 模块 1.上面模块

  • JavaScript实现Tab栏切换功能详解

    目录 1.实现效果 2.功能需求 3.抽象对象 4.切换功能实现 5.添加功能实现 6.删除功能实现 1.实现效果 2.功能需求 点击tab栏,可以切换效果. 点击+号,可以添加tab项和内容项. 点击x号,可以删除当前的tab项和内容项 双击tab项文字或者内容项文字,可以修改里面的文字内容. 3.抽象对象 抽象对象:Tab对象 该对象具有切换功能 该对象具有添加功能 该对象具有删除功能 该对象具有修改功能 4.切换功能实现 首先把大家可以先看看html结构,防止获取元素和类名的时候不知道获取

  • JavaScript实现tab栏切换的效果

    JavaScript实现tab栏切换的效果

    tab栏:点击不同的标签,显示不同的内容,被点击的标签样式发生改变(突出选中的是哪一个) 实现思路: 1.将tab栏分为上下两部分,上面是导航列表,下面是各部分对应的内容.把标签和内容都写出来,内容按照标签顺序依次顺着写,给标签都添加自定义属性- - -index,属性值从0开始,依次增加1 2.首先实现上面的效果,点击后样式切换,被点击的字体颜色.背景颜色改变等: ①css定义一个类eg:current,里面定义改变后的样式,先给第一个标签写一个该类名,其他的不写类名, ②js获取所有标签元素

  • JavaScript TAB栏切换效果的示例

    代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&quo

  • JavaScript实现tab栏切换效果

    本文实例为大家分享了JavaScript实现tab栏切换效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

  • js tab栏切换代码实例解析

    js tab栏切换代码实例解析

    今天机试有个内容是做网易云课堂tab栏切换的,如下 先简单说下我当时的想法 1.先弄一个大div盒子,我命名为tab 2.在大盒子tab里面有两个小盒子,分别是标题栏(tab_list)和内容栏(tab_con) 3.采用display:flex:使标题栏菜单和内容栏的内容水平对齐(可能待会放的代码不是很规范,但实现对齐效果) 4.js编写鼠标移入事件,主要是利用display:none和display:block之间的切换. 下面放下我当时写的代码吧,可能写得不是很正规,不符合习惯,请大家见谅

  • js实现tab栏切换效果

    本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js实现tab栏切换</title> <style> * { margin: 0; margin: 0; padding: 0; list-style: none; } .nav

  • JavaScript实现网页tab栏效果制作

    JS网页–tab栏制作,供大家参考,具体内容如下 在网页的制作中,通常会使用到tab栏,例如淘宝,商品详情,规格参数和累计评价三个栏,点击不同的栏下面出现的内容不同.在这样的设计中,JS可以做到. 根据淘宝做出默认状态下为商品介绍栏以及对应的文字,鼠标点击其他栏目,点击的栏目背景颜色变红,同时下面的栏目出现点击栏目的解释. 程序源码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charse

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • jquery+css实现Tab栏切换的代码实例

    jquery+css实现Tab栏切换的代码实例

    前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难.回来后,再把思路理一理,写一个,基础还是很重要的. 最终要实现的效果图如下: (1)点击tab栏显示对应的内容,并且tab栏样式变化.实现方式:一般tab栏如果要做成比较好看的样式,会切两张图作为背景,一张用于选中时的背景,一张用于未选中的背景.这里为了简单,只用css设置样式.然后为每个tab绑定click事件,当触发click事件时,对应的内容div的display设置block,否则设

  • jQuery插件实现非常实用的tab栏切换功能【案例】

    jQuery插件实现非常实用的tab栏切换功能【案例】

    本文实例讲述了jQuery插件实现tab栏切换功能.分享给大家供大家参考,具体如下: 效果: 核心代码:自己写了一个方法,需要用的时候直接调用就可以了. 方法如下: (function ($) { //给$的fn添加方法 $.fn.tabs=function ( options ) { /* { tabHeads:'tab-menu>li', tabHeadsClass:'active', tabBodys:'tab-main>div', tabBodysClass:'selected' }

  • vue二选一tab栏切换新做法实现

    vue二选一tab栏切换新做法实现

    问题描述 在我们做项目的过程中,有时候会要做一些tab栏切换效果.有两个tab的,有三个tab的,甚至有五六七八个tab的.平常我们直接拿饿了么的tab组件用就行了,但是偶尔自己闲着没事,自己写个两个tab切换效果的,即二选一效果.闲话少说,上动态效果图 本案例适合两个tab的(三个tab的可以仿照我的写,如果是四五个tab用饿了么组件会更快些) 代码如下 HTML部分 <template> <div id="app"> <div class="

随机推荐