如何解决如何在javascript中的href中获取特定字符串
我正在尝试创建一个 onload 事件,其中一个函数将当前 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”等。
解决方法
你错误地解决了这个问题。您需要了解 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()
}
,
这是一个普通的 JavaScript 示例,它将使所选部分可见。
它使用 hashchange
事件来检测哈希值何时发生变化。
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。