資訊專欄INFORMATION COLUMN
摘要：切換一直是頁面之中主要的結構，最近在寫的項目，想到可不可以不用和做控制，實現純和的切換。頁面交換的原理無非是利用標簽的屬性在顯示與否之間的切換。再之后利用的的選擇器就可以關聯上要切換的頁面了。這里直接利用了絕對定位的方法。
tab切換一直是頁面之中主要的結構，最近在寫vue的spa項目，想到可不可以不用href和js做控制，實現純css和html的tab切換。
tab頁面交換的原理無非是利用標簽的display屬性在顯示與否之間的切換。
而利用這點后，我們的input之中的單選按鈕就要派上用場了。
首先通過設置input和相應的label來作為tab的導航。
再之后利用input的checked的選擇器就可以關聯上要切換的頁面了。
當然我們需要把對應的主體內容標簽跟在label標簽后，利用兄弟選擇器控制它的display屬性。
為了讓幾個頁面處于同一位置，我們當然也要統一他們的位置。
這里直接利用了絕對定位的方法。
完成的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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111927.html
摘要：先上效果圖正如標題所說，本文是教你如何巧用偽類制作下拉菜單，原生，無。實際例子其實就是主題的右上角那個按鈕，你點一下就會有一個下拉菜單出現，在其他區域點擊返回原狀。為了讓下拉菜單更顯下拉的情況，采用的定位下轉換原點。 原文鏈接：http://devework.com/css3-target-dropdown.html showImg(https://segmentfault.com/...
摘要：以上就是狀態模式在實際開發中得應用，我們結合了綜合應用狀態模式。 在vue.js之類的mvvm的框架大行其道的當下，開發中最常見的場景就是通過改變數據來展示頁面或模塊的不同狀態，當我們把mvvm玩的不亦樂乎的時候，有時也會停下了想想：在某些項目中不能用vuejs之類的框架時，我們怎么通過改變數據來修改頁面或者模塊的狀態呢。嗯。說到狀態，就想到了狀態模式 狀態模式: 在很多情況下，一個對...
摘要：以上就是狀態模式在實際開發中得應用，我們結合了綜合應用狀態模式。 在vue.js之類的mvvm的框架大行其道的當下，開發中最常見的場景就是通過改變數據來展示頁面或模塊的不同狀態，當我們把mvvm玩的不亦樂乎的時候，有時也會停下了想想：在某些項目中不能用vuejs之類的框架時，我們怎么通過改變數據來修改頁面或者模塊的狀態呢。嗯。說到狀態，就想到了狀態模式 狀態模式: 在很多情況下，一個對...
摘要：自己實踐寫一個基于的插件面向對象的寫法這里我就不寫和了，主要就是分析插件代碼代碼我上傳到上了，如果你們想看結構及樣式的話，可以去把源碼下來看看地址地址目錄結構以及基本結構搭建首先搭建一個插件的框架里調用構造函數配置默認參數及參數獲取然后我們 自己實踐寫一個基于jquery的tab插件,面向對象的寫法這里我就不寫index.html,和index.css了，主要就是分析插件代碼tab.j...
閱讀 2101·2021-11-18 10:02
閱讀 2850·2021-09-04 16:41
閱讀 1142·2019-08-30 15:55
閱讀 1405·2019-08-29 17:27
閱讀 1068·2019-08-29 17:12
閱讀 2535·2019-08-29 15:38
閱讀 2854·2019-08-29 13:02
閱讀 2831·2019-08-29 12:29
