//被跳轉頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模擬點擊目標頁</title>
</head>
<style type="text/css">
.nav-panel{
display: flex;
align-items: center;
justify-content: flex-start;
}
.nav-subitem{
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 16px;
border: 1px solid red;
margin: 0 24px 16px 0;
color: red;
cursor: pointer;
}
.nav-active{
background: red;
color: #fff;
}
.content-subitem{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 24px;
display: none;/* 默認隱藏 */
}
.content-block{
display: block;/* 需要顯示的元素使用該class */
}
</style>
<body>
<div class="nav-panel">
<div class="nav-subitem nav-active">菜單一項</div>
<div class="nav-subitem">菜單二項</div>
<div class="nav-subitem">菜單三項</div>
</div>
<div class="content-panel">
<div class="content-subitem content-block" style="background: red">
第一頁面內容
</div>
<div class="content-subitem" style="background: blue;">
第二頁面內容
</div>
<div class="content-subitem" style="background: #7fb80e;">
第三頁面內容
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
// 點擊tab切換頁面
$(".nav-panel .nav-subitem").on("click",function(){
$(this).addClass("nav-active").siblings().removeClass("nav-active");
$(".content-panel .content-subitem").eq($(this).index()).show().siblings().hide();
})
$(function(){
// getQueryVariable函數用於獲取url攜帶參數
var type = getQueryVariable('type');
console.log(type)
if(type){
$(".nav-panel .nav-subitem").eq(type).click();
}
})
// 方式一（正則表達式）
// variable爲url參數的key
function getQueryVariable(variable)
{
// 構造一個含有variable（目標）參數的正則表達式對象
var reg = new RegExp("(^|&)"+ variable +"=([^&]*)(&|$)");
//獲得了當前鏈接的中?號後的參數（匹配目標參數）
var r = window.location.search.substr(1).match(reg);
console.log(r)
//返回目標參數
// unescape() 函數可對通過 escape() 編碼的字符串進行解碼。
if(r!=null)return unescape(r[2]); return null;
}
//方式二（使用js 獲取參數值）
// function getQueryVariable(variable) { //variable爲url參數的key
// var query = window.location.search.substring(1); //獲取url中"?"符後的字串，截取？後的字符串
// var vars = query.split("&"); //字符串按照&拆分
// for(var i = 0; i < vars.length; i++) {
// var pair = vars[i].split("="); //獲取每一個參數
// if(pair[0] == variable) {
// return pair[1]; //獲取參數值
// }
// }
// return(false);
// }
</script>
</html>
//點擊跳轉頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>點擊跳轉頁</title>
</head>
<style type="text/css">
.page{
display: inline-block;
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
background: #ddd;
color: red;
font-size: 16px;
text-decoration: none;
margin-right: 24px;
}
</style>
<body>
<a class="page" href="target_page.html?type=0">跳轉第一頁面</a>
<a class="page" href="target_page.html?type=1">跳轉第二頁面</a>
<a class="page" href="target_page.html?type=2">跳轉第三頁面</a>
</body>
</html>