點擊a頁面鏈接跳轉b頁面某個tab切換的實現

• 2019 年 11 月 13 日
• 筆記

a頁面有個鏈接，點擊後跳轉至 b頁面的某個 tab 上，顯示相應的內容。

具體方法：

注意：我的部分程式碼需要有 jQuery 的支援。

首先 a頁面的程式碼：

HTML：

<a href="b.html?tab=2">b_tab2.html</a>

CSS：

a{  	display: inline-block;  	width: 120px;  	height: 36px;  	line-height: 36px;  	background: #00b0f0;  	color: #FFF;  	text-align: center;  	text-decoration: none;  }

效果圖：

b頁面程式碼：

HTML：

<ul class="tab">  	<li><a href="">tab1</a></li>  	<li><a href="">tab2</a></li>  	<li><a href="">tab3</a></li>  </ul>  <ul class="inner">  	<li><a href="">我是tab1</a></li>  	<li><a href="">我是tab2</a></li>  	<li><a href="">我是tab3</a></li>  </ul>

CSS：

li{  	list-style: none;  	display: inline-block;  	padding: 5px 10px;  	background: #0a8cd2;  }  .tab .active{  	background: green;  }  a{  	color: #FFF;  	text-decoration: none;  }  .inner li{  	display: none;  }  .inner li.active{  	display: inline-block;  }

解釋一下，首先有一行 .tab 是 tab按鈕， .inner 是對應的三個 li 默認隱藏，第幾個 tab 選中就對應的顯示第幾個 li 。 

在 ?tab= 後面傳一個數值，通過 JS 獲取到該數值，然後通過該數字控制第幾個 tab 的選中及顯示隱藏。

JS程式碼：

<script>  	var m = /tab=([^&]+)/.exec(location.search);  	if(m){  	    console.log(m[1])  	    console.log(m)  	}  	var num = (m[1]-1)  	console.log(num)  	$(".tab li").eq(num).addClass("active");  	$(".inner li").eq(num).addClass("active");  </script>

效果如圖：