Question

我的页面是一个FAQ页面，顶部有水平标签。这些选项卡列出了类别，编码如下：

  <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元素。我想这样做，以便每个按钮都有一个唯一的网址，例如，如果我输入网址www.example.com/tab1-faq3，在页面加载时，会点击tab1，并且FAQ3将是单击以加载该内容。

我尝试搜索和搞乱java，但我似乎无法找到最佳解决方案。有人能指出我在实现这一目标的正确方向吗？

欣赏它！

Answer 1

您可以获取URL参数（在我的示例中，通过shebang），然后触发对特定DIV的点击（无论是shebang上的那个，还是根据shebang选择的那个）。在示例中，转到div.htm #tab会将div颜色更改为红色。

<div class="tab">Hey!</div>
<script>
    var hash = window.location.hash.replace("#", "");
    $(".tab").click(function() {
        $(this).css("color", "red");
    })
    $("."+hash).trigger("click"); // or $("."+hash).click()
</script>

您需要检查网址上的操作是否是您真正想要的操作，以避免有人触发其他div点击事件。

Answer 2

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

在每个标签中，我有按钮，点击后会加载一个div元素。

使用html：

onclick

使用jQuery，您可以绑定点击事件，如：

<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>

分配一个唯一的URL来点击页面加载时的特定按钮？

2 个答案: