gpt4 book ai didi

javascript - 使用 Bootstrap 时如何删除url中的#foofoo?

转载 作者:行者123 更新时间:2023-11-29 23:47:03 26 4
gpt4 key购买 nike

我正在使用 bootstrap (版本:3.3.7)实现了简单的导航。这是我的代码:

   <head>
<meta charset="UTF-8">
<script src="lib/bower_components/jquery/dist/jquery.js"></script>
<script src="lib/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="lib/bower_components/bootstrap/dist/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#SNP">SNP</a> </li>
<li><a data-toggle="tab" href="#SSR">SSR</a> </li>
</ul>
<div class="tab-content">
<div id="SNP" class="tab-pane fade in active">
Something about SNP.
</div>
<div id="SSR" class="tab-pane fade">
Something about SSR.
</div>
</div>
</div>

</body>
</html>

当我第一次来到这个页面时,Chrome(版本:57.0.2987.110)显示 URL 是 www.foofoo.org/page1 .变成www.foofoo.org/page1#SNPwww.foofoo.org/page1#SSR当我单击包含在 ul a 标记中的链接时。如何使网址成为www.foofoo.org/page1无论我点击哪个链接(换句话说,URL 始终是 www.foofoo.org/page1 )。

最佳答案

您可以通过在 anchor 标记中使用 data-target 属性而不是 href 来获得相同的效果:

<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" data-target="#SNP">SNP</a> </li>
<li><a data-toggle="tab" data-target="#SSR">SSR</a> </li>
</ul>
<div class="tab-content">
<div id="SNP" class="tab-pane fade in active">
Something about SNP.
</div>
<div id="SSR" class="tab-pane fade">
Something about SSR.
</div>
</div>

这意味着您不会在地址栏中看到 URL 更改。但是,我建议保留 href="#" 否则你的 anchor 标签会表现得很奇怪。

关于javascript - 使用 Bootstrap 时如何删除url中的#foofoo?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43631298/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com