javascript - 分配一个唯一的 URL 以单击页面加载时的特定按钮？

Question

我的页面是一个常见问题解答页面，顶部有水平选项卡。这些选项卡列出了类别，编码如下:

  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'cntab3')">category1</a> </li>
    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'cntab4')">category2</a></li>

在每个选项卡中，我都有按钮，单击这些按钮将加载 div 元素。我想让每个按钮都有一个唯一的URL，例如，如果我输入URL www.example.com/tab1-faq3，则在页面加载时，将单击tab1，然后单击FAQ3加载该内容。

我尝试搜索和搞乱java，但我似乎找不到最好的解决方案。谁能指出我实现这一目标的正确方向？

欣赏!

Answer 1

首先，不要使用 onclick 它是遗留的，它会创建非常难以调试的代码，并且如果您使用 jQuery，则不是最佳实践。请花点时间阅读 Decoupling Your HTML, CSS, and JavaScript .

Within each tab, I have buttons that when clicked, will load a div element.

使用 html:

<li>
  <a class="tablinks js-content" 
     data-content="cntab3" 
     data-target=".cntab3-content">category1</a> 
</li>
<li>
  <a class="tablinks js-content" 
     data-content="cntab4" 
     data-target=".cntab4-content">category2</a>
</li>

//... more html

<div class="cntab3-content"></div>
<div class="cntab4-content"></div>

使用 jQuery，您可以绑定(bind)点击事件，例如:

$(document).ready(function() {
  $('js-content').on('click', function(){
    loadContent($this);
  });

  function loadContent($element){   
    var content = $element.data('content');
    var $target = $($element.data('target'));

    var url = // something with content.
    $.get(/*whatever with url*/)
      .done(function (html) {
        // however you want to append html
        $target.html(html);
      });
  }

  if (window.location.href // check location, if match) {
    var $element = $('[data-content="' + hrefvalue + '"]');
    if ($element.length == 1) {
      loadContent($element);
    }
  };
});