CSS3實現選項卡切換的方法

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　

　　上面存在兩個錨鏈接：#tab和t#ab2。當點擊錨鏈接時，就會跳到對應的div，則::target就是給這些div用的。添加一下CSS

　　CSS Code復制內容到剪貼板

　　:target{

　　color:red;

　　}

　　#tab:target::after{

　　content:"tab1"

　　}

　　點擊錨鏈接，對應鏈接的div的文本變成紅色，另外，給#tab后面插入一個文本。

　　效果猛戳：https://jsfiddle.net/dwqs/cL8rawov/

　　應該大致明白了:target的含義了吧~

　　:target可以做什么

　　最簡單的用處：利用:target實現選項卡切換。

　　HTML：

　　XML/HTML Code復制內容到剪貼板

　　CSS:

　　CSS Code復制內容到剪貼板

　　.tab-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);

　　}

　　.tab-control a:hover{

　　background:rgba(70,121,189,1);

　　}

　　.tabs{

　　position:relative;

　　border:1px solid red;

　　height:200px;

　　width:135px;

　　overflow:hidden;

　　}

　　.tab{

　　height:100%;

　　width:100%;

　　}

　　:target{

　　display:block;

　　}

　　看看效果：Demo

　　當然，:target的功能不僅局限于此。隱藏元素、創建lightbox 等。MDN上給了很多個demo:more demo.

　　你自己也可以腦洞大開一下，哈哈。

　　瀏覽器支持

　　對于:target偽類，瀏覽器支持情況還是不錯的。

【CSS3實現選項卡切換的方法】相關文章：

如何簡單實現bootstrap選項卡效果05-05

css實現的tab切換效果實例02-26

使用CSS3來實現滾動視差效果的教程04-03

實現員工激勵的方法01-31

linux命令切換目錄的使用方法介紹06-11

thinkPHP多語言切換設置方法詳解04-10

PHP列表頁實現的方法05-24

PHP實現多線程的方法03-19

PHP實現多線程的方法08-02