成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

孫淑建 / 2877人閱讀

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

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

    

        標(biāo)題1
        標(biāo)題2
        標(biāo)題3
    

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


  $("#tit span").click(function() {
            var i = $(this).index();//下標(biāo)第一種寫(xiě)法
            //var i = $("tit").index(this);//下標(biāo)第二種寫(xiě)法
            $(this).addClass("select").siblings().removeClass("select");
            $("#con li").eq(i).show().siblings().hide();
        });

上面的代碼我是百度來(lái)的，實(shí)現(xiàn)方法也比較多，作為一個(gè)前端小白剛開(kāi)始使用vue寫(xiě)感覺(jué)好難過(guò)，大家不要嫌棄我蠢

全部


商品


新聞

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


    

        
         //這段代碼通過(guò)indexs==index的值來(lái)判斷active類(lèi)，通過(guò)a方法來(lái)決定indexs 的值 反正以我的水平是寫(xiě)不出來(lái)的
    

    

        
{{w}}

    




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


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


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


 

     
fhgfdshdf

     
sdfsdfsfsfsdfdsfffffffff

     
dsfdfgdfgdfgdfAAAAAAAAAAAA

 


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

            
                     
             
               

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

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87167.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    在沒(méi)有DOM操作的日子里，我是怎么熬過(guò)來(lái)的（上）
    
                                                     
    摘要：至于我為何要這么做，請(qǐng)聽(tīng)閏土娓娓道來(lái)。那么接下來(lái)，正文從這開(kāi)始熟悉閏土的朋友都知道，我是從時(shí)代過(guò)來(lái)的前端，在剛接觸和這類(lèi)框架的時(shí)候，完全可以用一臉懵逼來(lái)形容我，最為貼切。作者閏土少年出處本博客的文章如無(wú)特殊說(shuō)明，均為原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。

showImg(https://segmentfault.com/img/bVZjKW?w=670&h=442);
前言
在我動(dòng)筆寫(xiě)這篇文章的時(shí)候，...
    
                                                   
                          
    
                                
    
                                    shuibo
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    使用Vue寫(xiě)一個(gè)datepicker
    
                                                     
    摘要：演示地址希望大家能給個(gè)功能期望這個(gè)目前僅實(shí)現(xiàn)了一些常用的功能選擇時(shí)間這話(huà)說(shuō)得有點(diǎn)多余最大最小時(shí)間限制中英文切換其實(shí)也就星期和月份需要切換可以以形式使用，也可在瀏覽器環(huán)境中直接使用沒(méi)了。。。

前言
寫(xiě)插件是很有意思，也很鍛煉人，因?yàn)檫@個(gè)過(guò)程中能發(fā)現(xiàn)許多的細(xì)節(jié)問(wèn)題。在前端發(fā)展的過(guò)程中，jQuery無(wú)疑是一個(gè)重要的里程碑，圍繞著這個(gè)優(yōu)秀項(xiàng)目也出現(xiàn)了很多優(yōu)秀的插件可以直接使用，大大節(jié)省了開(kāi)發(fā)者...
    
                                                   
                          
    
                                
    
                                    luckyyulin
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    利用K8S技術(shù)棧打造個(gè)人私有云（連載之：私有云客戶(hù)端打造）
    
                                                     
    摘要：前端技術(shù)棧還是非常龐大的，為了能夠借助已經(jīng)存在的輪子來(lái)造出一輛車(chē)，所以我選擇了進(jìn)行實(shí)踐。狀態(tài)的管理的狀態(tài)管理依靠完成，用其來(lái)管理的所有組件狀態(tài)。私有云客戶(hù)端打造主頁(yè)面首先是主頁(yè)面，可以打開(kāi)任何一個(gè)云主機(jī)系統(tǒng)的頁(yè)面看，基本類(lèi)似。


showImg(https://segmentfault.com/img/remote/1460000013930354);

【利用K8S技術(shù)棧打造個(gè)人私有...
    
                                                   
                          
    
                                
    
                                    Jingbin_
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    利用K8S技術(shù)棧打造個(gè)人私有云（連載之：私有云客戶(hù)端打造）
    
                                                     
    摘要：前端技術(shù)棧還是非常龐大的，為了能夠借助已經(jīng)存在的輪子來(lái)造出一輛車(chē)，所以我選擇了進(jìn)行實(shí)踐。狀態(tài)的管理的狀態(tài)管理依靠完成，用其來(lái)管理的所有組件狀態(tài)。私有云客戶(hù)端打造主頁(yè)面首先是主頁(yè)面，可以打開(kāi)任何一個(gè)云主機(jī)系統(tǒng)的頁(yè)面看，基本類(lèi)似。


showImg(https://segmentfault.com/img/remote/1460000013930354);

【利用K8S技術(shù)棧打造個(gè)人私有...
    
                                                   
                          
    
                                
    
                                    shiina
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    UI大全：前端UI框架集合（持續(xù)更新，當(dāng)前32個(gè)）
    
                                                     
    摘要：簡(jiǎn)潔直觀強(qiáng)悍的前端開(kāi)發(fā)框架，讓開(kāi)發(fā)更迅速簡(jiǎn)單。是一套基于的前端框架。首個(gè)版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。


2017-1209 ZanUI (Vue)
2017-1218 Onsen UI(Vue, React, Angular)
2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...
    
                                                   
                          
    
                                
    
                                    only_do
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<