成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue.js，jquery 實現(xiàn)tabe切換

孫淑建 / 2834人閱讀

摘要：切換在各個網(wǎng)頁中經(jīng)常用到，平常用比較容易實現(xiàn)，使用中的選擇其余同胞元素，為了加深記憶順便把的代碼貼一下。

table切換在各個網(wǎng)頁中經(jīng)常用到，平常用jQuery比較容易實現(xiàn)，使用jQuery中的siblings選擇其余同胞元素，為了加深記憶順便把jQuery的代碼貼一下。

    

        標題1
        標題2
        標題3
    

    
    
        
  • 內(nèi)容111
    • 
        
  • 內(nèi)容222
    • 
        
  • 內(nèi)容333
    • 
    


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

上面的代碼我是百度來的，實現(xiàn)方法也比較多，作為一個前端小白剛開始使用vue寫感覺好難過，大家不要嫌棄我蠢

全部


商品


新聞

我用vue直接來操作DOM雖然可以實現(xiàn)，但我自己都覺得有些蠢，然后我百度了一下，果然大神就是給力，


    

        
         //這段代碼通過indexs==index的值來判斷active類，通過a方法來決定indexs 的值 反正以我的水平是寫不出來的
    

    

        
{{w}}

    


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

上面代碼來自池劍鋒使用vue實現(xiàn)tab切換例子

他的代碼中內(nèi)容部分來自box中的數(shù)據(jù)，為了讓內(nèi)容部分更加靈活，我又想到了一個比較笨的方法

 

     
fhgfdshdf

     
sdfsdfsfsfsdfdsfffffffff

     
dsfdfgdfgdfgdfAAAAAAAAAAAA

這樣就可以直接在內(nèi)容部分隨意編輯了，不知道各位大神還有沒有更好的方法歡迎大家指教
本文旨在自己歸納學(xué)習(xí)，寫的不好請大家見諒

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87167.html

相關(guān)文章

  • 在沒有DOM操作的日子里，我是怎么熬過來的（上）

    摘要：至于我為何要這么做，請聽閏土娓娓道來。那么接下來，正文從這開始熟悉閏土的朋友都知道，我是從時代過來的前端，在剛接觸和這類框架的時候，完全可以用一臉懵逼來形容我，最為貼切。作者閏土少年出處本博客的文章如無特殊說明，均為原創(chuàng)，轉(zhuǎn)載請注明出處。 showImg(https://segmentfault.com/img/bVZjKW?w=670&h=442); 前言 在我動筆寫這篇文章的時候，...

    shuibo 評論0 收藏0

  • 使用Vue寫一個datepicker

    摘要：演示地址希望大家能給個功能期望這個目前僅實現(xiàn)了一些常用的功能選擇時間這話說得有點多余最大最小時間限制中英文切換其實也就星期和月份需要切換可以以形式使用，也可在瀏覽器環(huán)境中直接使用沒了。。。 前言 寫插件是很有意思，也很鍛煉人，因為這個過程中能發(fā)現(xiàn)許多的細節(jié)問題。在前端發(fā)展的過程中，jQuery無疑是一個重要的里程碑，圍繞著這個優(yōu)秀項目也出現(xiàn)了很多優(yōu)秀的插件可以直接使用，大大節(jié)省了開發(fā)者...

    luckyyulin 評論0 收藏0

  • 利用K8S技術(shù)棧打造個人私有云（連載之：私有云客戶端打造）

    摘要：前端技術(shù)棧還是非常龐大的，為了能夠借助已經(jīng)存在的輪子來造出一輛車，所以我選擇了進行實踐。狀態(tài)的管理的狀態(tài)管理依靠完成，用其來管理的所有組件狀態(tài)。私有云客戶端打造主頁面首先是主頁面，可以打開任何一個云主機系統(tǒng)的頁面看，基本類似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技術(shù)棧打造個人私有...

    Jingbin_ 評論0 收藏0

  • 利用K8S技術(shù)棧打造個人私有云（連載之：私有云客戶端打造）

    摘要：前端技術(shù)棧還是非常龐大的，為了能夠借助已經(jīng)存在的輪子來造出一輛車，所以我選擇了進行實踐。狀態(tài)的管理的狀態(tài)管理依靠完成，用其來管理的所有組件狀態(tài)。私有云客戶端打造主頁面首先是主頁面，可以打開任何一個云主機系統(tǒng)的頁面看，基本類似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技術(shù)棧打造個人私有...

    shiina 評論0 收藏0

  • UI大全：前端UI框架集合（持續(xù)更新，當(dāng)前32個）

    摘要：簡潔直觀強悍的前端開發(fā)框架，讓開發(fā)更迅速簡單。是一套基于的前端框架。首個版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    only_do 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<