Question

使用jQuery / javascript可以吗？

在另一个页面中，我有一个<nav>，它们只是选项卡，当您单击tab-link时仅显示特定内容。

page1.html：

<nav class="subPageNav">
   <a href="#" id="A" class="tab-link">A</a>
   <a href="#" id="B" class="tab-link">B</a>
   <a href="#" id="C" class="tab-link">C</a>
   <a href="#" id="D" class="tab-link">D</a>
</nav>

<section id="A">
<!-- content -->
</section>

<section id="B">
<!-- content -->
</section>

and so on..

在单独的页面中，我有一个<a>，应该从另一个页面将其发送到特定标签。

page2.html

<a href="next.html#A">A</a>

我的代码无法正常运行。我该怎么做？

Answer 1

您需要获取URL中的哈希，找到相应的元素，然后触发点击：

$(function() {
  var activeTab = document.querySelector(location.hash);
  if (activeTab) {
    activeTab.click();
  }
});

Answer 2

尝试一下：

$(document).ready( function() {
   var activeTab = window.location.hash;
   if (activeTab) {
      $( activeTab )[0].click();
   }
});

Answer 3

这个对我有用。我在id按钮上添加了<a>。

page1.html

<a id="nav-a" href="page2.html">A</a>
<a id="nav-b" href="page2.html">B</a>
<a id="nav-c" href="page2.html">C</a>
<a id="nav-d" href="page2.html">D</a>

然后用此文件创建一个javascript文件

$(function() {

    $('a#nav-a').click(function(event) {
    localStorage.setItem("text", "nav-a");
    });

    $('a#nav-b').click(function(event) {
    localStorage.setItem("text", "nav-b");
    });

    /*and so on...*/

    var path = window.location.pathname;
    var pathSub = path.substring(path.lastIndexOf("/") + 1, path.length)

    if(pathSub == "page2.html"){
        document.getElementById(localStorage.getItem('text')).click();
    }
})

对于page2.html，我将id与id元素的<a>包括在内。

<nav class="subPageNav">
   <a href="#" id="nav-a" class="tab-link">A</a>
   <a href="#" id="nav-b" class="tab-link">B</a>
   <a href="#" id="nav-c" class="tab-link">C</a>
   <a href="#" id="nav-d" class="tab-link">D</a>
</nav>

Answer 4

您需要做的是使用部分完整的URL：

<a href="/next.html#A">A</a>

尝试使用它-更改的只是开始时的/。

链接重定向到另一个页面和特定选项卡

4 个答案: