Question

我在一个页面中有3组内容，可以通过选项卡进行导航。当我进入页面时，有一个默认的可见选项卡，然后我可以单击选项卡隐藏当前内容并显示另一个。

example.html的

<a href="example" name="example" class="tab active">Example</a> // default
<a href="about" name="about" class="tab">About</a>
<a href="contact" name="contact" class="tab">...</a>

...

<div class="example visible" id="example">...</div> // default visible content
<div class="about" id="about">...</div>
<div class="contact" id="contact">...</div>

现在，我添加了一个页脚，其中有链接连接到3个选项卡。因此，如果我在网站的其他部分，我可以点击链接，例如关于我，这将导航到 example.html 并直接进入该部分关于我。

footer.html

<ul>
   <li><a href="/example">Example</a></li>
   <li><a href="/example#about">Example About</a></li>
   <li><a href="/example#contact">Example Contact</a></li>
</ul>

以上工作完美无缺。 但是这是问题，当我点击页脚链接而我在example.html上时，它跳转到内容的位置但是因为当前而无法看到选项卡仍处于活动状态有没有办法在更改时检查URL，以便我可以解析它并根据它更改活动选项卡？

JS

$(document).ready(function() {
// find which footer link was clicked; doesn't work when navigating on the same page
  var hash = window.location.href.slice(window.location.href.indexOf('#') + 1);

if(hash === "foundation") {
     $("a[name='foundation']").addClass("active").siblings().removeClass("
active");
     $(".foundation").addClass("visible").siblings().removeClass("visible");
}
else if(hash === "credits") {...}
...



// click event for tabs
  $("a").on("click", function(event) {
    event.preventDefault();
    $(this).addClass("active").siblings().removeClass("active");
    var currentAttrVal = $(this).attr("href");
    $("." + currentAttrVal).addClass("visible").siblings().removeClass("visible");
  });
});

我知道剧本太重复了，但是一旦我解决了这个问题，我就会重构一切！

Answer 1

location对象有自己的当前哈希属性

window.location.hash

这也包括哈希符号，所以你需要

window.location.hash.slice(1)

要听取哈希值的更改，您必须使用onhashchange事件

您可以使用以下技术之一

window.onhashchange = funcRef;

或

window.addEventListener("hashchange", funcRef, false);

这种方式在使用＃时会在像angular这样的框架中使用！为不支持History API的浏览器定义路由的方法

您可以在MDN

中详细了解它

Answer 2

这里我认为可以帮助你的概念：（jsfiddle version）

<强> footer.html

<ul>
  <li>
    <input type="button" class="navigateButton" value="example" onclick="navigate(value)">
  </li>
  <li>
    <input type="button" class="navigateButton" value="About" onclick="navigate(value)">
  </li>
  <li>
    <input type="button" class="navigateButton" value="Contact" onclick="navigate(value)">
  </li>
</ul>

<强> CSS

.navigateButton {
  background: none!important;
  border: none;
  padding: 0!important;
  font: inherit;
  /*border is optional*/
  border-bottom: 1px solid #444;
  cursor: pointer;
}

<强> JS

var navigate = function (value) {

  switch (value) {
    case "example":
    //select appropriate tab here
      window.location.replace('/example');
      break;
    case "About":
    //select appropriate tab here
      window.location.replace('/example#About');
      break;      
    case "Contact":
    //select appropriate tab here
    window.location.replace('/example#Contact');
    break;
    default:
      alert('Unknown type');
  }
}

跳转到同一页面上的隐藏部分

2 个答案: