亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

DevTTL / 2888人閱讀

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

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

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

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

    

        
        
        

            
    
                
  • 第一頁(yè)tab
    • 
            

        

    

    

        
        
        

            
    
                
  • 第二頁(yè)tab
    •

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111927.html

相關(guān)文章

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

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

    littleGrow 評(píng)論0 收藏0

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

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

    劉東 評(píng)論0 收藏0

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

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

    silvertheo 評(píng)論0 收藏0

  • 動(dòng)手寫一個(gè)jquery插件(實(shí)踐)

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

    Kylin_Mountain 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<