Vue.js，jquery 实现tabe切换

孙淑建发布于2019-08-21 11:50 / 2786人阅读

摘要：切换在各个网页中经常用到，平常用比较容易实现，使用中的选择其余同胞元素，为了加深记忆顺便把的代码贴一下。

table切换在各个网页中经常用到，平常用jQuery比较容易实现，使用jQuery中的siblings选择其余同胞元素，为了加深记忆顺便把jQuery的代码贴一下。

  $("#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();
        });

上面的代码我是百度来的，实现方法也比较多，作为一个前端小白刚开始使用vue写感觉好难过，大家不要嫌弃我蠢

全部
商品
新闻

我用vue直接来操作DOM虽然可以实现，但我自己都觉得有些蠢，然后我百度了一下，果然大神就是给力，


    
        
         //这段代码通过indexs==index的值来判断active类，通过a方法来决定indexs 的值 反正以我的水平是写不出来的
    
    
        {{w}}

.wrap div{
        width: 300px;
        height: 300px;
        background-color: #0cc;
    }
.active{
    background-color: red
}

上面代码来自池剑锋使用vue实现tab切换例子

他的代码中内容部分来自box中的数据，为了让内容部分更加灵活，我又想到了一个比较笨的方法

 
     fhgfdshdf
     sdfsdfsfsfsdfdsfffffffff
     dsfdfgdfgdfgdfAAAAAAAAAAAA

这样就可以直接在内容部分随意编辑了，不知道各位大神还有没有更好的方法欢迎大家指教
本文旨在自己归纳学习，写的不好请大家见谅

GPU云服务器云服务器 jquery按钮切换 jquery点击切换 jquery图片切换 jquery标签页切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87167.html

在没有DOM操作的日子里，我是怎么熬过来的（上）

摘要：至于我为何要这么做，请听闰土娓娓道来。那么接下来，正文从这开始熟悉闰土的朋友都知道，我是从时代过来的前端，在刚接触和这类框架的时候，完全可以用一脸懵逼来形容我，最为贴切。作者闰土少年出处本博客的文章如无特殊说明，均为原创，转载请注明出处。 showImg(https://segmentfault.com/img/bVZjKW?w=670&h=442); 前言在我动笔写这篇文章的时候，...

shuibo 2019-08-21 17:49 评论0 收藏0
使用Vue写一个datepicker

摘要：演示地址希望大家能给个功能期望这个目前仅实现了一些常用的功能选择时间这话说得有点多余最大最小时间限制中英文切换其实也就星期和月份需要切换可以以形式使用，也可在浏览器环境中直接使用没了。。。前言写插件是很有意思，也很锻炼人，因为这个过程中能发现许多的细节问题。在前端发展的过程中，jQuery无疑是一个重要的里程碑，围绕着这个优秀项目也出现了很多优秀的插件可以直接使用，大大节省了开发者...

luckyyulin 2019-08-22 10:35 评论0 收藏0
利用K8S技术栈打造个人私有云（连载之：私有云客户端打造）

摘要：前端技术栈还是非常庞大的，为了能够借助已经存在的轮子来造出一辆车，所以我选择了进行实践。状态的管理的状态管理依靠完成，用其来管理的所有组件状态。私有云客户端打造主页面首先是主页面，可以打开任何一个云主机系统的页面看，基本类似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技术栈打造个人私有...

Jingbin_ 2019-06-28 16:19 评论0 收藏0
利用K8S技术栈打造个人私有云（连载之：私有云客户端打造）

摘要：前端技术栈还是非常庞大的，为了能够借助已经存在的轮子来造出一辆车，所以我选择了进行实践。状态的管理的状态管理依靠完成，用其来管理的所有组件状态。私有云客户端打造主页面首先是主页面，可以打开任何一个云主机系统的页面看，基本类似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技术栈打造个人私有...

shiina 2019-07-01 16:41 评论0 收藏0
UI大全：前端UI框架集合（持续更新，当前32个）

摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 评论0 收藏0