JavaScript实现简易tab栏切换案例

2024-07-28 12:55:11

本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码，供大家参考，具体内容如下

1. tab栏-案例1

tab栏分析

li里面的分析

js实现隐藏与显示

排他思想：

1）、所有元素全部清除样式（干掉其他人）
2）、给当前元素设置样式（留下我自己）
3）、注意顺序不能颠倒，首先干掉其他人，再设置自己

我的思路：

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #666;
        }

        .vertical-tab {
            width: 980px;
            margin: 100px auto;
        }

        .vertical-tab .nav {
            width: 200px;
            list-style: none;
        }

        .vertical-tab .nav-tabs1 {
            float: left;
            border-right: 3px solid #e7e7e7;
        }

        .vertical-tab .nav-tabs2 {
            float: right;
            border-left: 3px solid #e7e7e7;
        }

        .vertical-tab li a {
            display: block;
            padding: 10px 20px;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 18px;
            font-weight: 700;
        }

        .vertical-tab .active {
            color: #198df8;
        }

        .vertical-tab .tabs {
            width: 500px;
            float: left;
        }

        .vertical-tab .tab-content {
            padding: 10px 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .vertical-tab .tab-content h3 {
            color: #333;
            margin: 0 0 10px 0;
        }

        .vertical-tab .tab-content p {
            font-size: 12px;
        }

        .vertical-tab .hidden {
            display: none;
        }
    </style>

</head>

<body>
    <div class="vertical-tab">
        <ul class="nav nav-tabs1">
            <li><a href="javascript:;" class="active" index="1">section 1</a></li>
            <li><a href="javascript:;" index='2'>section 2</a></li>
            <li><a href="javascript:;" index="3">section 3</a></li>
        </ul>
        <div class="tab-content tabs">
            <div class="tab-content1">
                <h3>section 1</h3>
                <p>content 1</p>
            </div>
            <div class="tab-content1 hidden">
                <h3>section 2</h3>
                <p>content 2</p>
            </div>
            <div class="tab-content1 hidden">
                <h3>section 3</h3>
                <p>content 3</p>
            </div>
            <div class="tab-content1 hidden">
                <h3>section 4</h3>
                <p>content 4</p>
            </div>
            <div class="tab-content1 hidden">
                <h3>section 5</h3>
                <p>content 5</p>
            </div>
            <div class="tab-content1 hidden">
                <h3>section 6</h3>
                <p>content 6</p>
            </div>
        </div>
        <ul class="nav nav-tabs2">
            <li><a href="javascript:;" index="4">section 4</a></li>
            <li><a href="javascript:;" index="5">section 5</a></li>
            <li><a href="javascript:;" index="6">section 6</a></li>
        </ul>
    </div>
    <script>
        var as = document.querySelectorAll("a")
        var item = document.querySelectorAll(".tab-content1")
        console.log(as)
            // console.log(lis)
        for (var i = 0; i < as.length; i++) {
            as[i].addEventListener('click', function() {
                // 干掉其他人
                for (var j = 0; j < as.length; j++) {
                    as[j].className = ''
                }
                // 留下自己
                this.className = "active"

                // 显示内容
                var index = this.getAttribute('index')
                console.log(index)
                    // 干掉其他人
                for (var i = 0; i < item.length; i++) {
                    item[i].style.display = "none"
                }
                // 留下自己
                item[index - 1].style.display = "block"
            })
        }
    </script>
</body>

</html>

vue实现

vue实现起来相对简单，只需要灵活运用v-if和v-for

具体代码：

<!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" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .vertical-tab {
            width: 920px;
            margin: 100px auto;
        }

        .vertical-tab .nav {
            list-style: none;
            width: 200px;
        }

        .vertical-tab .nav-tabs1 {
            border-right: 3px solid #e7e7e7;
        }

        .vertical-tab .nav-tabs2 {
            border-left: 3px solid #e7e7e7;
        }

        .vertical-tab .nav a {
            display: block;
            font-size: 18px;
            font-weight: 700;
            text-align: center;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 10px 20px;
            margin: 0 0 1px 0;
            text-decoration: none;
        }

        .vertical-tab .tab-content {
            color: #555;
            background-color: #fff;
            font-size: 15px;
            letter-spacing: 1px;
            line-height: 23px;
            padding: 10px 15px 10px 25px;
            display: table-cell;
            position: relative;
        }

        .vertical-tab .nav-tabs1 {
            float: left;
        }

        .vertical-tab .tabs {
            width: 500px;
            box-sizing: border-box;
            float: left;
        }

        .vertical-tab .tab-content h3 {
            font-weight: 600;
            text-transform: uppercase;
            margin: 0 0 5px 0;
        }

        .vertical-tab .nav-tabs2 {
            float: right;
        }

        .tab-content {
            position: relative;
        }

        .tab-content .tab-pane {
            position: absolute;
            top: 10px;
            left: 20px;
        }

        .nav li.active a {
            color: #198df8;
            background: #fff;
            border: none;
        }

        .fade {
            opacity: 0;
            transition: all .3s linear;
        }

        .fade.active {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="vertical-tab" id="app">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs1">
            <li v-on:click='change(index,0)' :class='currentIndex==index?"active":""' v-if="index < list.length/2" v-for="(item, index) in list"><a href="#" rel="external nofollow"  rel="external nofollow" > {{item.title}} </a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content tabs">
            <div class="tab-pane  fade" :class='currentIndex==index?"active":""' :key='item.id' v-for='(item, index) in list'>
                <h3>{{item.title}}</h3>
                <p>{{item.content}}</p>
            </div>

        </div>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs2">
            <li v-on:click='change(index,1)' :class='currentIndex==index?"active":""' v-if="index >= list.length/2" v-for="(item, index) in list"><a href="#" rel="external nofollow"  rel="external nofollow" > {{item.title}} </a></li>
        </ul>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                currentIndex: 0, // 选项卡当前的索引
                list: [{
                    id: 1,
                    title: 'Section 1',
                    content: 'content1'
                }, {
                    id: 2,
                    title: 'Section 2',
                    content: 'content2'
                }, {
                    id: 3,
                    title: 'Section 3',
                    content: 'content3'
                }, {
                    id: 4,
                    title: 'Section 4',
                    content: 'content4'
                }, {
                    id: 5,
                    title: 'Section 5',
                    content: 'content5'
                }, {
                    id: 6,
                    title: 'Section 6',
                    content: 'content6'
                }]
            },
            methods: {
                change(index, flag) {
                    if (flag) {
                        console.log(index)
                        this.currentIndex = index;
                    } else {
                        this.currentIndex = index;
                    }

                }
            }

        })
    </script>
</body>

如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

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

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栏切换特效

这里分享一个前端必会的案例,是一个Tab栏的切换效果,除了Tab栏本身会被点击切换之外,Tab本身也决定着其下方的内容板块的显示. 运行效果展示: 如上图所示,其实就是点击上方的Tab栏然后Tab栏本身的样式会被修改,然后其下方的内容块也会跟着显示对应的内容.这样的效果以及功能在前端的应用是非常广泛的,所以这可以说是前端必会了.话不多说下面先上代码: (这里就不上CSS样式代码了,个人根据需求进行设置即可,li用float布局就好) HTML的结构: <div class="tab&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栏切换代码实例解析

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

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

本文实例为大家分享了JavaScript实现简易tab栏切换内容栏的具体代码,供大家参考,具体内容如下 html+css部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
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栏切换效果的具体代码,供大家参考,具体内容如下 1. tab栏-案例1 tab栏分析 li里面的分析 js实现隐藏与显示排他思想: 1).所有元素全部清除样式(干掉其他人) 2).给当前元素设置样式 (留下我自己) 3).注意顺序不能颠倒,首先干掉其他人,再设置自己我的思路: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta char
JS实现简单Tab栏切换案例

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

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

本文是我学习tab栏切换时的笔记,步骤很详细.比较适用于JavaScript初学者 1.基础 - 排他思想如图,点击任意一个按钮,当前按钮应该显示橘色,其他显示默认颜色灰色. 代码运行步骤: 利用for循环遍历5个按钮: 选中的按钮进行 onclick 事件时,首先删除所有按钮的类名,使其全部显示灰色(34行): 然后给当前点击的按钮添加指定类名,使其显示橘色(37行). 示例代码: <!DOCTYPE html> <html> <head> <meta cha

JavaScript实现简易tab栏切换案例

1. tab栏-案例1

相关推荐

随机推荐