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

資訊專欄INFORMATION COLUMN

巧用css實現(xiàn)無js的tab切換

DevTTL / 2840人閱讀

摘要：切換一直是頁面之中主要的結(jié)構(gòu)，最近在寫的項目，想到可不可以不用和做控制，實現(xiàn)純和的切換。頁面交換的原理無非是利用標簽的屬性在顯示與否之間的切換。再之后利用的的選擇器就可以關(guān)聯(lián)上要切換的頁面了。這里直接利用了絕對定位的方法。

tab切換一直是頁面之中主要的結(jié)構(gòu)，最近在寫vue的spa項目，想到可不可以不用href和js做控制，實現(xiàn)純css和html的tab切換。

tab頁面交換的原理無非是利用標簽的display屬性在顯示與否之間的切換。
而利用這點后，我們的input之中的單選按鈕就要派上用場了。
首先通過設(shè)置input和相應(yīng)的label來作為tab的導(dǎo)航。

再之后利用input的checked的選擇器就可以關(guān)聯(lián)上要切換的頁面了。
當然我們需要把對應(yīng)的主體內(nèi)容標簽跟在label標簽后，利用兄弟選擇器控制它的display屬性。
為了讓幾個頁面處于同一位置，我們當然也要統(tǒng)一他們的位置。
這里直接利用了絕對定位的方法。
完成的css代碼如下

    input[type="radio"]{
        display: none;
    }
    .tab label{
        display: block;
        cursor: pointer;
        position: absolute;
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #eee;
    }
    .label-1{
        left: 0;
        top: 0;
    }
    .label-2{
        left: 60px;
        top: 0;
    }
    input[type="radio"]:checked~div[class^="mod"]{
        display: block;
    }
    input[type="radio"]:checked~label{
        background: orange;
    }
    [class^="mod"]{
        position: absolute;
        top: 40px;
        left: 20px;
        display: none;
    }

html代碼

    

        
        
        

            
    
                
  • 第一頁tab
    • 
            

        

    

    

        
        
        

            
    
                
  • 第二頁tab
    •

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

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

相關(guān)文章

  • 巧用CSS3：target 偽類制作Dropdown下拉菜單（無JS）

    摘要：先上效果圖正如標題所說，本文是教你如何巧用偽類制作下拉菜單，原生，無。實際例子其實就是主題的右上角那個按鈕，你點一下就會有一個下拉菜單出現(xiàn)，在其他區(qū)域點擊返回原狀。為了讓下拉菜單更顯下拉的情況，采用的定位下轉(zhuǎn)換原點。 原文鏈接：http://devework.com/css3-target-dropdown.html showImg(https://segmentfault.com/...

    littleGrow 評論0 收藏0

  • 設(shè)計模式---狀態(tài)模式在web前端中的應(yīng)用

    摘要：以上就是狀態(tài)模式在實際開發(fā)中得應(yīng)用，我們結(jié)合了綜合應(yīng)用狀態(tài)模式。 在vue.js之類的mvvm的框架大行其道的當下，開發(fā)中最常見的場景就是通過改變數(shù)據(jù)來展示頁面或模塊的不同狀態(tài)，當我們把mvvm玩的不亦樂乎的時候，有時也會停下了想想：在某些項目中不能用vuejs之類的框架時，我們怎么通過改變數(shù)據(jù)來修改頁面或者模塊的狀態(tài)呢。嗯。說到狀態(tài)，就想到了狀態(tài)模式 狀態(tài)模式: 在很多情況下，一個對...

    劉東 評論0 收藏0

  • 設(shè)計模式---狀態(tài)模式在web前端中的應(yīng)用

    摘要：以上就是狀態(tài)模式在實際開發(fā)中得應(yīng)用，我們結(jié)合了綜合應(yīng)用狀態(tài)模式。 在vue.js之類的mvvm的框架大行其道的當下，開發(fā)中最常見的場景就是通過改變數(shù)據(jù)來展示頁面或模塊的不同狀態(tài)，當我們把mvvm玩的不亦樂乎的時候，有時也會停下了想想：在某些項目中不能用vuejs之類的框架時，我們怎么通過改變數(shù)據(jù)來修改頁面或者模塊的狀態(tài)呢。嗯。說到狀態(tài)，就想到了狀態(tài)模式 狀態(tài)模式: 在很多情況下，一個對...

    silvertheo 評論0 收藏0

  • 動手寫一個jquery插件(實踐)

    摘要：自己實踐寫一個基于的插件面向?qū)ο蟮膶懛ㄟ@里我就不寫和了，主要就是分析插件代碼代碼我上傳到上了，如果你們想看結(jié)構(gòu)及樣式的話，可以去把源碼下來看看地址地址目錄結(jié)構(gòu)以及基本結(jié)構(gòu)搭建首先搭建一個插件的框架里調(diào)用構(gòu)造函數(shù)配置默認參數(shù)及參數(shù)獲取然后我們 自己實踐寫一個基于jquery的tab插件,面向?qū)ο蟮膶懛ㄟ@里我就不寫index.html,和index.css了，主要就是分析插件代碼tab.j...

    Kylin_Mountain 評論0 收藏0

發(fā)表評論

0條評論

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