CSS3 target 僞類不得不說那些事兒（純CSS實現tab切換）

時間 2019-11-16

標籤 css3 css target 不得不說那些事兒實現 tab 切換欄目 CSS 简体版

原文原文鏈接

是否是以爲target有點眼熟?!javascript

今天要講的不是HTML的<a>標籤裏面有個target屬性。css

target僞類是css3的新屬性。html

說到僞類，對css屬性的人確定都知道:hover、:link、:visited、:focus等等，target用法跟他們是同出一轍的。java

官方定義是：css3

URL 帶有後面跟有錨名稱 #，指向文檔內某個具體的元素。這個被連接的元素就是目標元素(target element)。程序員

:target 選擇器可用於選取當前活動的目標元素。瀏覽器

若是你是第一次看到這個定義，是否是有點懵？！不要緊~程序員要用代碼來交流。舉個栗子。spa

<!DOCTYPE html>
<html>
<head>
<style>
:target
{
border: 2px solid  blue;
background-color: yellow;
}
</style>
</head>
<body>


<p><a href="#news1">跳轉至內容 1</a></p>
<p><a href="#news2">跳轉至內容 2</a></p>

<p id="news1"><b>內容 1...</b></p>
<p id="news2"><b>內容 2...</b></p>


</body>
</html>

看完代碼是否是沒feel?~That's all right.一塊兒來看效果圖。3d

初始化是這樣的：code

當我點擊「跳轉至內容 1」的時候，變成了這樣：

有木有feel到target跟其餘僞類的不同凡響?!

哈哈~來，直接切入要講的主題！！！

利用target的特性，能夠實現純css的tab效果切換。

（重要事情說三遍！）

code以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>

.tabmenu {
	position:absolute;
	top:100%;
	margin:0;
}
.tabmenu li{
	display:inline-block;
}
.tabmenu li a {
	display:block;
	padding:5px 10px;
	margin:0 10px 0 0;
	border:1px solid #91a7b4;
	border-radius:0 0 5px 5px;
	background:#e3f1f8;
	color:#333;
	text-decoration:none;
}

.tablist {
	position:relative
	;margin:50px auto;
	min-height:200px;
}

.tab_content {
		position: absolute;
		width:600px;
		height:170px;
		padding:15px;
		border:1px solid #91a7b4;
		border-radius:3px;
		box-shadow:0 2px 3px rgba(0,0,0,0.1);
		font-size:1.2em;
		line-height:1.5em;
		color:#666;
		background:#fff;
	}

#tab1:target, #tab2:target, #tab3:target {
		z-index: 1;
}		
</style>
</head>
<body>
<div class="tablist">
    <ul class="tabmenu">
        <li><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
    </ul>
    <div id="tab1" class="tab_content">tab1</div>
    <div id="tab2" class="tab_content">tab2tab2</div>
    <div id="tab3" class="tab_content">tab3tab3tab3</div>
</div>
</body>
</html>

　　效果圖以下：

最關鍵的代碼：

先根據target的特性錨連接到對應的div,再根據z-index的屬性，改變div的層級關係，從而實現tab的切換效果！

（固然，首先，你要懂z-index屬性的特色。）

最後提一下兼容性問題：由於這是CSS3新特性，因此不兼容老版本的瀏覽器，例如IE678。。。