首先,在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()
}
上面就是通过跳转传参数显示相对应的内容了,因为是项目里面提出的代码(当然是经过过滤和更改的),就不上效果图了(●’◡’●)