CSS3實現選項卡切換的方法
導語:在網頁製作時採用層疊樣式表技術,可以有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。以下的是YJBYS生小編為大家蒐集的使用CSS3實現選項卡切換的方法,歡迎閲讀參考。
:target是什麼?
MDN是這樣描述的::target
The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.
在document中,可以設置錨鏈接,舉個例子:
CSS Code複製內容到剪貼板
Test :target
Test 2:target
This is a tab. This is another tab.上面存在兩個錨鏈接:#tab和t#ab2。當點擊錨鏈接時,就會跳到對應的div,則::target就是給這些div用的。添加一下CSS
CSS Code複製內容到剪貼板
:target{
color:red;
}
#tab:target::after{
content:"tab1"
}
點擊錨鏈接,對應鏈接的'div的文本變成紅色,另外,給#tab後面插入一個文本。
效果猛戳:
應該大致明白了:target的含義了吧~
:target可以做什麼
最簡單的用處:利用:target實現選項卡切換。
HTML:
XML/HTML Code複製內容到剪貼板
tab1
tab2
tab3
This is a tab1
This is a tab2 This is a tab3CSS:
CSS Code複製內容到剪貼板
-control a{
display:inline-block;
text-decoration:none;
color:#FFF;
height:20px;
width:40px;
text-align:center;
line-height:20px;
background:rgba(70,121,189,0.75);
}
-control a:hover{
background:rgba(70,121,189,1);
}
{
position:relative;
border:1px solid red;
height:200px;
width:135px;
overflow:hidden;
}
{
height:100%;
width:100%;
}
:target{
display:block;
}
看看效果:Demo
當然,:target的功能不僅侷限於此。隱藏元素、創建lightbox 等。MDN上給了很多個demo:more demo.
你自己也可以腦洞大開一下,哈哈。
瀏覽器支持
對於:target偽類,瀏覽器支持情況還是不錯的。
-
JavaScript與用户端教程
一頁面輸出1.頭部文件複製代碼代碼如下:2.複製代碼代碼如下:3.外部文件4.利用頁面ID的innerHtml複製代碼代碼如下:5.警告alert("廣州百匯物流有限公司");6.詢問複製代碼代碼如下:if(confirm("是否訪問我們的首頁")){alert("是的',前往");}else{alert("退出");}...
-
針對dom元素的分析應用
如果這個DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動態的向html裏寫入DOM元素。今天這章我們就講這兩個應用(一)對html裏現有的DOM元素進行操作。我上面説了,對現有的DOM元素進行操作,無非就是對樣式的操作。所以我們首先就要能獲取這個DOM元素的樣...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
網頁設計很糟糕的10個原因
個好的網頁設計,不僅吸引眼球,也是實用的、直觀的、層級簡單卻足夠複雜到保持用户的興趣。但是不好的網頁設計是由很多原因造成的,下面是關於網頁設計很糟糕的10個原因,歡迎閲讀了解!沒有足夠的空白空白可以説是設計中最重要的一部分。它有助於防止用户在瀏覽網站時...