如何使执行Javascript代码的按钮有自己的URL

How to make button which executes a Javascript code have its own URL

本文关键字：按钮 自己的 URL 代码 何使 执行 Javascript      更新时间：2023-09-26

我已经发布了这个，但是我将用jsFiddle更好地解释它。因此，转发。

如果这个问题已经被问到，我很抱歉，但是我已经到处找了，我根本找不到任何帮助。

我使用锚与href='#'制作了"选项卡"。然而，我想要的是，当我点击按钮1，它改变url为www.myurl.com/btn1，当我点击按钮2 - www.myurl.com/btn2。

当我访问www.myurl.com/btn1时，我希望button1像在jsFiddle上单击时一样突出显示。

最简单的方法是使用URL的片段来存储选项卡的id，即。myurl.com#tab1。然后，您可以在加载时检查URL是否有片段(使用location.hash)并设置默认选项卡，您可以在用于更改选项卡的a元素的href属性中使用完全相同的机制。试试这个:

$('.tab-trigger').click(function() {
  showTab($(this).attr('href'));
})
if (window.location.hash)
  showTab(window.location.hash);
    
function showTab(tab) {
  $('.tab-content').hide();
  $(tab).fadeIn();
}
.tab-content {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#div1" class="tab-trigger">Button 1</a>
<a href="#div2" class="tab-trigger">Button 2</a>
<a href="#div3" class="tab-trigger">Button 3</a>
<div id="div1" class="tab-content">div 1</div>
<div id="div2" class="tab-content">div 2</div>
<div id="div3" class="tab-content">div 3</div>

相关文章：