如何在 javascript 的 href 中获取特定字符串

Question

我正在尝试创建一个 onload 事件，其中 function 将当前的 URL 与 href 进行比较，并根据显示的 href 显示内容。 我想通过从父母中选择一个孩子来实现这一点，尽管我不确定如何具体获取 href 中的内容。 这是我写的一些代码：

html

<ul id="main-nav">
      <li class="nav active"><a href="#shipping">Shipping</a></li>
      <li class="nav"><a href="#returns">returns</a></li>
      <li class="nav"><a href="#custom">Custom Orders</a></li>
      <li class="nav"><a href="#replacements">Replacements/ Warranty</a></li>
      <li class="nav"><a href="#mostFAQs">Most Frequently Asked Questions</a></li>
      <li class="nav"><a href="#RAD">RAD Principles</a></li>
      <li class="nav"><a href="#environmental">Environmental Stewardship</a></li>
      <li class="nav"><a href="#USA">MADE in the USA</a></li>
</ul>

js

var href = $("#main-nav").children('a');

$("div.faq-container").hide();

if (window.location.href.includes(href)) {
    $("div.faq-container").eq("0").show();
} else (window.location.href.includes(href)) {
    $("div.faq-container").eq("1").show();
}

我的主要问题是我想写有

var href = $("#main-nav").children('a');

以便它仅获取href 中的内容，除此之外没有其他内容，因此它将具有“#shipping”、“#returns”等作为其值。

Answer 1

你把问题搞错了。 你需要知道的是location.hash来定位正确的div来显示。

这应该更接近：

var hash = window.location.hash

// Hide all .faq-container
$("div.faq-container").hide()

// If there is a hash
if(hash){
  $("#"+hash).show()
}

Answer 2

这是一个普通的 JavaScript 示例，它将使所选部分可见。

它使用hashchange事件来检测 hash 何时更改。

 const sections = [...document.querySelectorAll('.section')]; function showSelected () { sections.forEach(section => section.classList.remove('show')); if(location.hash.length) { const section = document.querySelector(location.hash); if (section) { section.classList.add('show'); } } } window.addEventListener('hashchange', showSelected);

 .section { margin: 0.5rem; padding: 0.5rem; background-color: #e0e0e0; width: 10rem; display: none; }.show { display: block; }

 <ul id="main-nav"> <li class="nav active"><a href="#shipping">Shipping</a></li> <li class="nav"><a href="#returns">returns</a></li> <li class="nav"><a href="#custom">Custom Orders</a></li> <li class="nav"><a href="#replacements">Replacements/ Warranty</a></li> <li class="nav"><a href="#mostFAQs">Most Frequently Asked Questions</a></li> <li class="nav"><a href="#RAD">RAD Principles</a></li> <li class="nav"><a href="#environmental">Environmental Stewardship</a></li> <li class="nav"><a href="#USA">MADE in the USA</a></li> </ul> <div id="shipping" class="section">#shipping</div> <div id="returns" class="section">#returns</div> <div id="custom" class="section">#custom</div> <div id="replacements" class="section">#replacements</div> <div id="mostFAQs" class="section">#mostFAQs</div> <div id="RAD" class="section">#RAD</div> <div id="environmental" class="section">#environmental</div> <div id="USA" class="section">#USA</div>