通过href或者参数传值到另一个页面显示相对应的不同内容

首先，在A.html页面通过a标签的href去传值
A.html就下面第一个截图这些内容

<ul class="items">
	<li>
		<a target="_blank" href="/user/B?items=0">
			内容1
		</a>
	</li>
	<li>
		<a target="_blank" href="/user/B?items=1">
			内容2
		</a>
	</li>
</ul>

接着，在我们的B.html页面中接收这个参数

下面的截图全部是B.html的

接受这个参数之前，需要写一个函数去解析：

//  解析URL参数
function getQueryVariable(variable){
	// 得到地址栏 /user/B?items=0 
    var query = window.location.search.substring(1);
    // 如果是多个参数拼接的话先分割
    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);
}

调用这个函数拿到item = 0这个参数值

const id=getQueryVariable("item")

重点来了

方法一：
用html内的dom id去对应显示

// 获取对应id
function getItem(id){
	var dom = document.getElementById(id)
	dom.click()
}

上面是获取到的 0 然后通过 id 也就是0传到dom中，写个点击事件 dom.click()就好了

html里面是：

<a href="" id="0">
	B页面接收A页面传来的值，用id来对应显示内容
</a>

划线了：你们说内容呢，怎么都是a标签啊
我写的是通过点击a标签显示对应的内容（可以理解为：a标签是菜单；对应内容是点击菜单对应的内容）

html:

<ul class="items">
	<li class="active">
		<a href="" id="0">
			内容1
		</a>
	</li>
	<li>
		<a href="" id="1">
			内容2
		</a>
	</li>
</ul>

点击a标签对应显示的内容：

<div class="tab_content">
	 <div class="items-content">
	 	这是内容阿1区块喔
	 </div>
	  <div class="items-content">
	 	这是内容小2区块啊
	 </div>
</div>

好了，该jquery上场了，我的弱肋啊( ▼-▼ )

$(function () {
	// 在这里默认显示第一个内容区块
	$(".tab_content>.items-content").eq(0).show().siblings().hide();
});

// 点击事件触发显示内容区块

$(".items>li").click(function (e) {
	// 因为是a标签，所以要阻止默认行为；如果有li嵌套ul>li>a的话，避免相互影响，要阻止冒泡行为
	e.preventDefault();
	e.stopPropagation()
	//  添加点击事件 li active ,并移除同级 li 的 active
	$(this).addClass("active").siblings().removeClass("active");
	// 获取li的下标
	var index = $(this).index();
	// 通过下标显示对应的内容，并隐藏同级的
	$(".tab_content>.items-content").eq(index).show().siblings().hide()
});

方法二：
用href去对应显示
html:

<ul class="items">
	<li class="active">
		<a href="/user/B?items=0">
			内容1
		</a>
	</li>
	<li>
		<a href="/user/B?items=1">
			内容2
		</a>
	</li>
</ul>

现在是用href了：

// 获取对应href
function getItem(id){
	var str = '/user/items?item=' + id
	var dom = $( " [ href = ' " + str + " ' ] " )
	dom.click()
}

上面就是通过跳转传参数显示相对应的内容了，因为是项目里面提出的代码（当然是经过过滤和更改的），就不上效果图了(●’◡’●)

---