当url散列与特定div匹配时，将活动类添加到div
当url散列与特定div匹配时，将活动类添加到div
提问于 2021-08-24 10:20:52
我有一个带有水平手风琴的页面。这是通过一些css和Javascript来完成的，它们在所单击的面板上添加了类active。你可以在这里找到它的最基本的版本：https://codepen.io/kubuskwal/pen/JjJjGmo
现在，我应该这样做:当url具有#hash参数时，例如site.com/mypage#red，具有类red的面板也应该在加载页面时自动接收类active，从而被展开。
不幸的是，我对Javascript的了解仍然非常有限，虽然它看起来相对简单，但我似乎无法让它工作。到目前为止，我只得到了这个，它可以工作，但它只将活动类添加到第一个面板。
const currentUrl = window.location.hash
if (currentUrl == "#red") {
document.querySelector(".panel").classList.add("active");
}如果我能让它将currentUrl与面板div中的类进行比较会更好，如果其中一个类与currentUrl匹配，它应该将活动类添加到该div中。但我花了一整天的时间试图弄清楚如何做到这一点，但没有结果:(。这里有许多类似的(但不是完全相同的)解决方案的问题，我已经看过了所有的问题，但大多数都是关于jQuery的，不幸的是，我只能使用普通的Javascript。
任何帮助都将不胜感激。谢谢！
回答 4
Stack Overflow用户
回答已采纳
发布于 2021-08-24 10:39:09
刚刚用你的javascript在本地测试了一下，看起来你把querySelector设置错了。将其更改为：
if (currentUrl === '#red') {
document.querySelector(".red").classList.add("active");
}更新：
const currentUrl = location.hash
const classSelector = currentUrl.replace('#','.')
if (currentUrl) {
document.querySelector(classSelector).classList.add("active");
}Stack Overflow用户
发布于 2021-08-24 10:43:03
如果url包含#red，则添加活动类，如果url不包含，且页面仍具有带红色的活动类，则需要将其删除
const currentUrl = window.location.hash;
if (currentUrl == "#red") {
document.querySelector(".red").classList.add("active");
}
else{
if (document.querySelector(".red").classList.contains('active')) {
document.querySelector(".red").classList.remove('active');
}
}以一种更简单的方式！如果只是想添加类
const currentUrl = window.location.hash;
if (currentUrl == "#red") {
document.querySelector(".red").classList.add("active");
}Stack Overflow用户
发布于 2021-08-24 11:17:58
将此javascript代码添加到脚本中
let selectedDiv = window.location.hash;
selectedDiv = selectedDiv.substring(1);
const selectedPanel = document.querySelector("."+selectedDiv);
if (selectedPanel) {
selectedPanel.classList.add('active');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68905806
复制相关文章
相似问题
腾讯云开发者
