jQuery锚链接切换菜单？
jQuery锚链接切换菜单？
提问于 2022-03-25 22:04:34
我使用jQuery制作了一个切换菜单，有人可以点击不同的span标题在不同的内容容器之间切换(在网站上，这个切换菜单在不同的联系人表单之间切换)。该菜单工作，但我试图使它，以便如果用户单击一个锚链接在不同的页面，他们将被发送到这个页面，菜单将自动切换到相应的容器的内容。
例如，如果有人点击"mydomain.com/test- page /# third“这样的锚链接，我希望第三个菜单项的内容在页面加载时自动切换和显示。我一直在玩使用"window.location.hash“来触发这样的点击事件，但无法弄清楚。
当页面url的末尾有这样的锚散列时，是否有一种触发单击事件的方法？
真的很感激人们能提供的任何帮助！
这是小提琴：https://jsfiddle.net/ecv5jwsr/
$(function() {
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle(ix === 0);
$('#second').toggle(ix === 1);
$('#third').toggle(ix === 2);
$('#four').toggle(ix === 3);
$("a[href='" + window.location.hash + "']").parent("#test").click();
});
});<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container text-center">
<!-- the toggler -->
<div class="row">
<div class="col-12">
<p id="toggle">
<span><a href="#" id="test">TITLE 1</a></span>
<span><a href="#" id="test">TITLE 2</a></span>
<span><a href="#" id="test">TITLE 3</a></span>
<span><a href="#" id="test">TITLE 4</a></span>
</p>
</div>
</div>
</div>
<!--container -->
<div class="container p-5 contact-page-forms">
<div class="row pl-md-5 pr-md-5">
<div class="col-12 pt-4">
<div id="left">
<h3>Content 1</h3>
</div>
<div id="second">
<h3>Content 2</h3>
</div>
<div id="third">
<h3>Content 3</h3>
</div>
<div id="four">
<h3>Content 4</h3>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-26 01:55:49
为此，您需要设置选项卡id，并将其保存为url中的参数，如下所示：
$(function () {
let url = new URL(window.location);
let tab = (url.searchParams.get("tab") == null ? 'left' : url.searchParams.get("tab"));
url.searchParams.set('tab', tab);
history.pushState({}, null, url);
$(`.col-12.pt-4 div`).addClass('hide');
$(`.col-12.pt-4 #${tab}`).removeClass('hide');
$('#toggle > span').click(function () {
let tab = $(this).attr('for');
$(`.col-12.pt-4 div`).addClass('hide');
$(`.col-12.pt-4 #${tab}`).removeClass('hide');
let href = $(this).find('a').attr('href');
let url = new URL((href == '#' || href == '' ? window.location : href));
url.searchParams.set('tab', tab);
history.pushState({}, null, url);
//window.location.href = url;
});
});.col-12.pt-4 .hide {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container text-center">
<!-- the toggler -->
<div class="row">
<div class="col-12">
<p id="toggle">
<span for="left"><a href="#">TITLE 1</a></span>
<span for="second"><a href="#">TITLE 2</a></span>
<span for="third"><a href="#">TITLE 3</a></span>
<span for="four"><a href="#">TITLE 4</a></span>
</p>
</div>
</div>
</div>
<!--container -->
<div class="container p-5 contact-page-forms">
<div class="row pl-md-5 pr-md-5">
<div class="col-12 pt-4">
<div id="left" class="hide">
<h3>Content 1</h3>
</div>
<div id="second" class="hide">
<h3>Content 2</h3>
</div>
<div id="third" class="hide">
<h3>Content 3</h3>
</div>
<div id="four" class="hide">
<h3>Content 4</h3>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71623599
复制相关文章
相似问题
腾讯云开发者
