「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

梅問題-「CSS3:target選擇器」免用jQuery就可實作出Tab頁籤式的互動式切換
  在網頁中頁籤式的內容切換,是一個相當實用的功能,但這頁籤的切換則需透過Javascript,才能實現出頁籤的切換,因此這需具備程式的基礎才行,但最近梅干突然想到在CSS3的選擇器中,提供了:target的選擇器,而這個target與a標籤中的target完全不同喔!
  在CSS中的target是可指定目前選擇到的對象套用樣式的設定,因此只要善用這個概念,就可實作出網頁常用的頁籤式切換,更重要的是完全不用寫到任何的程式,只需透過樣式的設定就可完成,因此身為網設的朋友,也一塊來看看,如何善用:target這個選擇器吧!
Step1
首先將html的架構建立好,而href的連結名稱,要與span的id名稱一致。
<span id="tab-1">1</span>
<span id="tab-2">2</span>
<span id="tab-3">3</span>
<span id="tab-4">4</span>

<div id="tab">
<!-- 頁籤按鈕 -->
<ul>
  <li><a href="#tab-1">Tab 1</a></li>
  <li><a href="#tab-2">Tab 2</a></li>
  <li><a href="#tab-3">Tab 3</a></li>
  <li><a href="#tab-4">Tab 4</a></li>
</ul>
<!-- 頁籤的內容區塊 -->
<div class="tab-content-1"><p>內容-1</p></div>
<div class="tab-content-2"><p>內容-2</p></div>
<div class="tab-content-3"><p>內容-3</p></div>
<div class="tab-content-4"><p>內容-4</p></div>
</div>

Step2
接著打開瀏覽器,就可看到剛所建立好的html網頁結構。
梅問題-「CSS3:target選擇器」免用jQuery就可實作出Tab頁籤式的互動式切換
Step3
再加入CSS的:target選擇器,當選取到時,將區塊加入紅框。
/* span:target */
#tab-1:target,
#tab-2:target,
#tab-3:target,
#tab-4:target{
  border: solid 1px red;
}
	
/*頁籤變換*/
#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
#tab-4:target ~ #tab > ul li a[href$="#tab-4"] {
  border: solid 1px red;
}

/*頁籤內容顯示*/
#tab-1:target ~ #tab > div.tab-content-1,
#tab-2:target ~ #tab > div.tab-content-2,
#tab-3:target ~ #tab > div.tab-content-3,
#tab-4:target ~ #tab > div.tab-content-4 {
  border: solid 1px red;
}

Step3
這時點上方的頁籤,網址也會帶入剛所點選取的名稱,再將剛所選到的區塊ID加入紅框,如此一來就可知道,目前所選取到的區塊。
梅問題-「CSS3:target選擇器」免用jQuery就可實作出Tab頁籤式的互動式切換
Step4
當都能正確選擇到後,就可將頁籤區塊,透過CSS美化,並將剛的紅框,改成顯示與關閉。
#tab{
		width: 400px;
		background: #1caa5d;
		border: solid 1px #1caa5d;
	}
	/* 頁籤ul */
	#tab>ul{
		overflow: hidden;
		margin: 0;
    padding: 10px 20px 0 20px;
	}
	#tab>ul>li{
		list-style-type: none;

	}
	#tab>ul>li>a{
		text-decoration: none;
		font-size: 13px;
		color: #333;
		float: left;
		padding: 10px;
		margin-left: 5px;
	}

	/*頁籤div內容*/
	#tab>div {
	  clear:both;
	  padding:0 15px;
	  height:0;
	  overflow:hidden;
	  visibility:hidden;
	  -webkit-transition:all .4s ease-in-out;
	  -moz-transition:all .4s ease-in-out;
	  -ms-transition:all .4s ease-in-out;
	  -o-transition:all .4s ease-in-out;
	  transition:all .4s ease-in-out;
	}

	/* span:target */
	#tab-1:target,
	#tab-2:target,
	#tab-3:target,
	#tab-4:target{
	  border: solid 1px red;
	}
	
	/*第一筆的底色*/
	span:target ~ #tab > ul li:first-child a {
		 background:#1caa5d;
	}
	span:target ~ #tab > div:first-of-type {
		visibility:hidden;
	  height:0;
	  padding:0 15px;
	}
	
	/*頁籤變換&第一筆*/
	span ~ #tab > ul li:first-child a,
	#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
	#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
	#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
	#tab-4:target ~ #tab > ul li a[href$="#tab-4"] {
	  background: #fff;
	}

	/*頁籤內容顯示&第一筆*/
	span ~ #tab > div:first-of-type,
	#tab-1:target ~ #tab > div.tab-content-1,
	#tab-2:target ~ #tab > div.tab-content-2,
	#tab-3:target ~ #tab > div.tab-content-3,
	#tab-4:target ~ #tab > div.tab-content-4 {
		visibility:visible;
	  height:200px;
	  background: #fff;
	}

Step4
美化好後,接著再點頁籤,除了頁籤與網址會變外,上方的文字也會框起來,就可知道目前所選取到的區塊順序。
梅問題-「CSS3:target選擇器」免用jQuery就可實作出Tab頁籤式的互動式切換
梅問題-「CSS3:target選擇器」免用jQuery就可實作出Tab頁籤式的互動式切換
Step5
最後再把span的display設為none,就大功告成啦!如此一來就可實現出,完全不用寫到任何的程式,透過CSS樣式就可做出,頁籤式的區塊切換。
梅問題-「CSS3:target選擇器」免用jQuery就可實作出Tab頁籤式的互動式切換
[範例預覽]

相關文章

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Retina高解析網頁圖片怎麼透過CSS3 media設定,讓Apple官網告訴你

Retina高解析網頁圖片怎麼透過CSS3 media設定,讓Apple官網告訴你

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

近期講座

更多講座