精华内容
下载资源
问答
  • tab切换

    2018-04-17 11:10:57
    在前端开发过程中,经常会遇到tab切换,以及鼠标滑动显示tab内容的情况,在这里总结一下。1、鼠标点击tab切换//tab切换 $(".tab").eq(0).show(); $(".nav ul li").click(function(){ var num...

    在前端开发过程中,经常会遇到tab切换,以及鼠标滑动显示tab内容的情况,在这里总结一下。

    1、鼠标点击tab切换

    //tab切换
        $(".tab").eq(0).show();
        $(".nav ul li").click(function(){
            var num =$(".nav ul li").index(this);
            $(".tab").hide();
            $(".tab").eq(num).show();
            $(".nav ul li").eq(num).addClass("active").siblings().removeClass("active");
        })

    a、首先先了解一下 jQuery 遍历 - eq() 方法

    例子

    $("body").find("div").eq(2).addClass("blue");
    //w3c 通过index为2的div添加适当的类

    .eq(index) 方法将匹配元素集缩减值指定 index 上的一个。

    其中index整数,指示元素的位置(最小为 0)。如果是负数,则从集合中的最后一个元素往回计数。(请注意,index 是基于零的,并且是在 jQuery 对象中引用元素的位置,而不是在 DOM 树中。

    因此使用eq来进行定位使得整个逻辑变得更加清晰简单。

    b、然后是 jQuery siblings() 方法

    siblings() 方法返回被选元素的所有同胞元素。

    例子

      $("h2").siblings("p");   //返回属于 <h2> 的同胞元素的所有 <p> 元素:
    


    了解这些,逻辑就非常清晰了。先隐藏所有tab,显示第一个,获取鼠标点击的元素的index,显示index指示位置的元素,清除其他同胞元素的样式,再显示选中样式。

    2、mouseover

    鼠标经过跟点击逻辑一样,只需把click改成mouseover。

    //tab切换
        $(".tab").eq(0).show();
        $(".nav ul li").mouseover(function(){
            var num =$(".nav ul li").index(this);
            $(".tab").hide();
            $(".tab").eq(num).show();
            $(".nav ul li").eq(num).addClass("active").siblings().removeClass("active");
        })


    展开全文
  • 在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换、Tab动态组件切换、通过v-show设置Tab显示隐藏。每种方法实现起来其实都不难,看看官网介绍或...

    在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换、Tab动态组件切换、通过v-show设置Tab显示隐藏。每种方法实现起来其实都不难,看看官网介绍或看几篇博客应该就能实现。

    但这里面其实还有很多细节需要我们去做,如

    Tab切换时,切换过的Tab组件状态怎样缓存

    在项目中经常会有 页面A -> 页面B -> 页面C 则从 页面C 返回 页面B 时 页面B 使用缓存数据,而页面A 跳到 页面B 时,则页面B每次都请求最新数据。比如我们在某APP内点击 最新新闻(页面A) 选项 跳转到 新闻列表(页面B) 选择某一条新闻 跳转到 新闻详情(页面C) 页面,我们希望,从新闻详情返回到新闻列表时,直接用刚才请求的数据,而不每次都重新发送请求,而从 最新新闻 跳转到 新闻列表时,则都请求最新的数据

    父组件如何给子组件传递参数

    页面内Tab来回切换后,如何直接返回到上一级页面

    页面循环切换时,前进或后退如何保证页面结构正确(具体下面会讲到)

    Tab路由切换带缓存

    想要通过路由进行切换,就需要使用嵌套路由,即整个大页面是一个路由,点击不同Tab时,再通过嵌套路由来切换不同的路由。

    想要Tab切换时保存当前状态可以使用keep-alive包裹,keep-alive具体使用参考这篇文章-vue中动态添加和删除组件缓存 keep-alive

    包裹Tab的组件页面我们也要动态的缓存,这里也需要用到keep-alive,只是这个keep-alive需要添加到App.vue内,各个组件的动态缓存我们使用的是keep-alive的include属性。缓存最大数使用max属性

    router-link介绍

    通过to属性链接目标路由,当被点击时,内部会立刻把 to 的值传到 router.push(),既然是通过router.push()的方式跳转,那么就会往history记录中添加,这样当返回时,可能就会先从Tab3返回到Tab2再返回到Tab1再返回,这种体验很不好,怎样一步返回呢,就是在router-link中添加replace属性,这样当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录,这样就可一步返回了,如:

    通过 命名的路由 传递参数,如:User

    通过 带查询参数 传递参数,如:Register,结果路由为:/register?plan=private

    router-link设置点击事件时需要添加 natvie, 如@click.native="TabClick()"

    思路

    通过router配置嵌套路由

    通过使用keep-alive的include属性有条件的缓存组件

    通过store响应式的修改include属性对应的值

    通过组件内导航钩子beforeRouteEnter、beforeRouteLeave给store提交mutations修改

    实例演示

    1:page1->news->page2 然后再依次返回

    通过演示我们发现

    从page2返回到news时,总是能返回到我们之前保存的状态

    从news返回到page1后,再从page1跳转news,不管news之前是什么状态,都会初始化显示购物的页面

    2:page1(1)->news(2)->page2(3)->page1(4)->news(5)->page2(6) 然后再依次返回

    这个视频里有几个问题需要我们去思考

    第四步跳转到第五步,为什么Tab选中为购物、内容选中为鞋包,为什么news组件及内部路由组件都缓存着

    第三步返回到第二步,为什么Tab选中为购物、内容选中为母婴,但从右边缓存的组件看,为什么shopping组件也被缓存了

    这两个问题我们后边会具体介绍

    部分代码示例

    1:在router中配置各个路由

    这里需要注意,配置children子路由时path不能加 / ,在router-link的to后面写的路由需要以 / 开头,以 / 开头的嵌套路径会被当作根路径

    export default new Router({

    routes: [

    {

    path: '/page1',

    name: 'page1',

    component: () => import(/* webpackChunkName: "test" */ './views/news/page1.vue')

    }, {

    path: '/page2',

    name: 'page2',

    component: () => import(/* webpackChunkName: "test" */ './views/news/page2.vue')

    }, {

    path: '/news',

    name: 'newsIndex',

    component: () => import(/* webpackChunkName: "test" */ './views/news/news.vue'),

    children: [{

    path: 'sports',

    name: 'sports',

    component: () => import(/* webpackChunkName: "test" */ './views/news/sports.vue'),

    }, {

    path: 'shopping',

    name: 'shopping',

    component: () => import(/* webpackChunkName: "test" */ './views/news/shopping.vue'),

    }, {

    path: 'learn',

    name: 'learn',

    component: () => import(/* webpackChunkName: "test" */ './views/news/learn.vue'),

    }]

    }

    ]

    })

    2:在App.vue组件通过computed计算属性响应式的获取store里的keepAliveArr计算属性,并赋值给keep-alive的include属性,并设置最多可缓存5个组件

    page1跳转代码

    btnLuYouClick() {

    this.$router.push({

    path: '/news/shopping',

    query: {

    content: '购物'

    }

    });

    }

    page2跳转代码

    btnJumpClick() {

    this.$router.push({

    path: '/page1'

    })

    },

    sports和learn代码比较简单就不粘贴了

    上面的代码应该已经够用,如果需要全部详细代码的就留言吧,我再单独发你。

    展开全文
  • 网页做tab切换,由于组件每一次切换都会重新版实例化组件,我们想要网页不论如何切换都仍然保持tab里面的内容不会刷新版,减少网页重新版渲染以及减少请求实现方法:使用包裹组件列表网页跳转详情 ,列表网页保持上...

    网页做tab切换,由于组件每一次切换都会重新版实例化组件,我们想要网页不论如何切换都仍然保持tab里面的内容不会刷新版,减少网页重新版渲染以及减少请求

    实现方法:使用包裹组件

    列表网页跳转详情 ,列表网页保持上一次操作状态

    通过是否加载router-view 和路由元meta设置网页是否需要缓存来实现

    router-view嵌套多层的话,可能要设置多层,然后通过beforeRouteLeave监听路由离开,设置是否缓存

    //从其他网页跳转不需要缓存网页 从详情网页回来则需要缓存

    补充知识:vue 动态组件(tabs切换)keep-alive:主要用于保留组件状态或避免重新版渲染

    通过keep-alive 保留数据值 填写数据时切换到其他网页,后返回当前页数据保留 ,主要用于保留组件状态或避免重新版渲染

    • 首页
    • 关于我们

    首页数据

    关于我们数据

    var vm=new Vue({

    el:'.app',

    data:{

    currView:"home"

    },

    components:{

    "home":{

    template:"#homeTemp"

    },

    "abount":{

    template:"#abountTemp"

    }

    }

    });

    以上这篇vue 实现tab切换保持数据状态就是小编共享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持乐购源码。

    展开全文
  • 纯CSS实现Tab切换 效果图 思路 代码 CSSJS实现Tab切换 效果图 思路纯CSS实现Tab切换效果图思路ul li显示tab列表 li里面嵌套子div 显示详情 子div采用绝对布局 (让所有的子div都重叠在一个地方) 然后全部隐藏 在...

    纯CSS实现Tab切换

    效果图

    这里写图片描述

    思路

    ul li显示tab列表 li里面嵌套子div 显示详情
    子div采用绝对布局 (让所有的子div都重叠在一个地方)
    然后全部隐藏 在li的hover 时使其显示

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                list-style: none;
            }
            #main{
                width: 60px;
    
            }
            div{
                display: none;
                position: absolute;
                left: 13%;
                top: 3%;
            }
            .test{
                background-color: #c8f7ff;
            }
            .test:hover{
                background-color: cornflowerblue;
            }
            .test:hover div{
                display: block;
                background-color: bisque;
            }
    
        </style>
    </head>
    <body>
    
    <ul id="main">
        <li class="test">手机
            <div>
                <ul>
                    <li>小米</li>
                    <li>华为</li>
                    <li>中兴</li>
                </ul>
            </div>
        </li>
    
        <li  class="test">家电
            <div>
                <ul>
                    <li>空调</li>
                    <li>冰箱</li>
                    <li>洗衣机</li>
                </ul>
            </div>
        </li>
    
        <li  class="test">家具
            <div>
                <ul>
                    <li>沙发</li>
                    <li>茶几</li>
                    <li>衣橱</li>
                </ul>
            </div>
        </li>
    </ul>
    </body>
    </html>

    CSS+JS实现Tab切换

    效果图:

    这里写图片描述

    思路:

    和纯CSS 差不多 先布局出来 然后 子div全部隐藏 不同的是 这里通过代码控制样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box{
                width: 600px;
                background-color: cadetblue;
            }
            .title {
                width: 100%;
                height: 50px;
            }
    
            .title_i {
                line-height: 50px;
                text-align: center;
                width: 100px;
                height: 50px;
                float: left;
                margin-right: 10px;
            }
    
            .content {
                width: 500px;
                height: 200px;
                background-color: #c8f7ff;
                position: relative;
            }
    
            .content_i {
                position: absolute;
                opacity: 0;
            }
    
            .title_i_active {
                background-color: #ffffff;
            }
    
            .content_i_active {
                opacity: 1;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <div class="title" id="temptitle">
            <div class="title_i" id="title_{{index}}" onclick="select({{index}})">{{title}}</div>
            <!--title end-->
        </div>
        <!--title end-->
        <div class="content" id="tempcontent">
            <ul class="content_i" id="content_{{index}}">
                {{str}}
            </ul>
        </div>
        <!--content end-->
    </div>
     <!--box end-->
    </body>
    <script>
        //    1 准备数据
        var data = [
            {
                title: "房产",
                content: ["275万购昌平邻铁三居 总价20万买一居", "200万内购五环三居 140万安家东三环", "北京首现零首付楼盘 53万购东5环50平", "京楼盘直降5000 中信府 公园楼王现房"]
            },
            {
                title: "家居",
                content: ["40平出租屋大改造 美少女的混搭小窝", "经典清新简欧爱家 90平老房焕发新生", "新中式的酷色温情 66平撞色活泼家居", "    瓷砖就像选好老婆 卫生间烟道的设计"]
            },
            {
                title: "二手房",
                content: ["通州豪华3居260万 二环稀缺2居250w甩", "西3环通透2居290万 130万2居限量抢购", "黄城根小学学区仅260万 121平70万抛!", "独家别墅280万 苏州桥2居优惠价248万"]
            }
        ]
        //     2 写入数据
        function writeData() {
            //2.1 拿到模版
            var mobantitle = g("temptitle").innerHTML;
            var mobancontent = g("tempcontent").innerHTML;
    
            var titleArr = [];
            var contentArr = [];
            //2.2 写入
            for (i in data) {
                titleArr[i] = mobantitle.replace(/{{index}}/g, i)
                        .replace(/{{title}}/g, data[i].title);
                var str="";
                for (var j = 0; j < data[i].content.length; j++) {
                    str+="<li>"+data[i].content[j]+"</li>"
                }
                contentArr[i] = mobancontent.replace(/{{index}}/g, i)
                        .replace(/{{str}}/g,str);
    
            }
            g("temptitle").innerHTML = titleArr.join("");
            g("tempcontent").innerHTML = contentArr.join("");
        }
    
    
    //    3 选择 方法
        function  select(n){
            var titles=g(".title_i");
            var content=g(".content_i");
            for(var i=0;i<titles.length;i++){
                titles[i].className="title_i";
                content[i].className="content_i";
            }
            var title_new=g("title_"+n);
            var content_new=g("content_"+n);
            title_new.className+=" title_i_active";
            content_new.className+=" content_i_active"
        }
        window.onload = function () {
            writeData();
        }
        function g(key) {
            if (key.charAt(0) == ".") {
                key = key.substr(1);
                return document.getElementsByClassName(key);
            }
            else {
                return document.getElementById(key);
            }
        }
    </script>
    </html>
    展开全文
  • 效果图如下: xml部分代码如下: <!-- 一级标题部分布局 --> <view class="paytabs"> ...'active':''}}" data-current="0" bindtap="clickTab">一级标题1</view> <vi...
  • 本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件。1、vue如何使用element-ui上一篇文章已经分享了如何在vue中使用element-ui创建tab组件切换内容(需要了解的朋友点击链接...
  • React实现tab切换

    万次阅读 2017-03-29 23:25:31
    react tab 切换
  • vue tab切换

    2017-11-01 19:41:28
    给大家分享一个vue tab切换小demo,代码如下图 效果图如下:
  • tab切换效果,滑动tab 点击切换tab标签   演示 XML/HTML Code &lt;div class="container"&gt;     &lt;div class="main"&gt;   &lt...
  • tab切换,适用于多个tab切换

    千次阅读 2013-07-11 11:21:53
    tab切换 * {  padding:0;  margin:0 } body {  font-size:12px } ul, li, ol {  list-style:none } a {  text-decoration:none } .clearfix {  clear:both;  overflow:hidde
  • 我们在使用Win7电脑办公的时候,常常会需要用到切换窗口的快捷键Alt+Tab,这样可以快速切换不同的程序界面,提高工作效率,但是Alt+Tab切换窗口的数量是固定的,不过我们可以改变这个数量,下面小编给大家介绍Win7...
  • Vue 组件封装之 Tab 切换

    千次阅读 2019-07-25 17:22:27
    实战 Vue 第5天:封装一个tab切换组件前言使用现存组件面临的问题封装 tab 组件的思路封装 tab 组件代码总结 前言 以上 tab 切换功能在前端开发中司空见惯。各种现存的组件也随手拈来。在 Vue 中,有配套的 element-...
  • js实现tab切换以及自动切换

    千次阅读 2016-11-23 14:20:48
    js实现tab切换以及自动切换
  • vue实现Tab切换功能

    千次阅读 2019-11-01 15:56:02
    在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换、Tab动态组件切换、通过v-show设置Tab显示隐藏。每种方法实现起来其实都不难,看看官网介绍或...
  • 使用快捷键Shift+Tab切换Tab

    千次阅读 2016-05-11 10:46:24
    使用快捷键Shift+Tab切换Tab 使用一个变量存储点击过的Tab的序号 Java代码 privateintdefaultTabbedIndex=0; /*** *tab的序号,用于使用快捷键Shift+Tab切换Tab */ privateList<Integer>...
  • BottomNavigationBar 是底部导航条,可以让我们定义底部Tab切换,bottomNavigationBar是Scaffold组件的参数。 这是Flutter BottomNavigationBar 自定义底部导航条实现底部页面tab切换的效果 看视频的话去B站找 Dart ...
  • 【JavaScript实现Tab切换

    千次阅读 2017-08-03 00:33:16
    【JavaScript实现Tab切换】 使用类名实现最简单Tab切换 完成函数封装版Tab切换 this的下标获取实现Tab切换 自定义属性版Tab切换 ...
  • vue tab切换 (动态数据切换)

    万次阅读 2017-11-01 10:23:20
    前几天刚开始使用vue 做项目,然后自己就在项目中摸索写了一个tab切换的小dome,仿淘宝订单状态的tab切换
  • css实现tab切换

    千次阅读 2016-11-21 16:23:45
    tab切换在项目中也算是常用技术,一般实现tab切换都用js或者jq实现,今天给大家介绍两种只用css实现tab切换方法: 方法一: 原理:通过label标签的关联属性和input的单选类型实现相应div的显示 1.创建一个类名为...
  • 使用jq实现tab切换

    万次阅读 2019-08-08 15:08:12
    使用jq实现tab切换,效果如下 完整代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab切换</title> <style type="text/css"> #box...
  • 解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 &amp;lt;canvas class=&quot;kcanvas&quot; canvas-id=&quot;ringCanvas&quot; hidden=&quot;{{...
  • Vue实现Tab切换效果

    2020-09-24 13:55:00
    通过Vue实现简单的Tab切换 实现思路是点击上方的标题,下方的内容随之发生改变,上方和下方用的是两个块,是兄弟节点,所以需要点击tab标题和下方内容一一对应,基予两个模块若下标相同是一个内容实现的。 Tab切换...
  • tab切换及其对比总结

    2018-07-08 21:49:54
    描述:tab切换一个简单的小功能,在pc端还是在移动端总是可以预见使用的情况,下面总结一下tab切换的实现。tab切换简单来讲就是某一个标题下对应某一块内容。jquery实现最简单的tab切换,主要使用的就是display:...
  • VUE实现Tab切换

    千次阅读 2019-05-27 02:46:12
    VUE中实现Tab切换方式,需要用到以下知识点:1、动态绑定class,用于导航高亮显示:class="{active:cur==0}"复制代码2、click点击事件,用于改变当前cur的值@click="cur=0"复制代码3、使用v-show="cur==0",用于判断...
  • 小程序tab切换遇到的问题
  • layui菜单tab切换功能

    千次阅读 2019-03-29 10:40:15
    layui菜单tab切换功能 <!--html菜单切换--> <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title" id="titleUl" > <li class="layui-this"&...
  • Tab切换及下拉

    2017-03-28 10:41:08
    Tab切换 #tab{width:400px;} #tab ul{ list-style:none;overflow:hidden;margin:0px;padding:0px;} #tab ul li{float:left;padding:5px 10px;border:1px solid #eee;cursor:pointer; } #tab ul li.cur{...
  • uni-app tab切换

    2021-04-02 11:03:21
    uni-app tab切换 <template> <view class="content"> <!-- 头部 --> <view class="navbar"> <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ ...
  • tab切换的实现

    千次阅读 2019-05-30 17:19:56
    tab切换就是鼠标放在某个标签上下面显示的就是该标签相关的内容,效果如下 当鼠标放在电影上显示的是电影内容,放在电视上显示的是电视内容,放在综艺上显示的是综艺内容, 代码: <!DOCTYPE html> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,455
精华内容 8,582
关键字:

tab切换