Javascript 使用jQuery选择特定href的锚定标记

目标

刷新浏览器后，我希望用户保持在刷新前的菜单/内容中

问题

刷新浏览器后，刷新前用户所在的特定菜单的内容显示为活动（即，它显示在屏幕上）。但是，该特定内容的菜单图标不显示为活动（即，它不显示黑色）

我正在努力选择当前href的锚元素（图标所在的位置）（刷新前用户所在的元素，刷新后相同）

尝试

$（文档）.ready（函数（）{
$（'a[class^=menu]'）。单击（function（）{
$（'a[class^=menu]'）。removeClass（'active'）；
$（'div[class^=content]'）。removeClass（'active'）；
if（$（this）.hasClass（'menu-1'））{
$（'.menu-1'）.addClass（'active'）；
$（'.content-1'）.addClass（'active'）；
}
if（$（this）.hasClass（'menu-2'））{
$（'.menu-2'）.addClass（'active'）；
$（'.content-2'）.addClass（'active'）；
}
if（$（this）.hasClass（'menu-3'））{
$（'.menu-3'）.addClass（'active'）；
$（'.content-3'）.addClass（'active'）；
}
});
if（window.location.hash.substr（1）！=“”）{
$（'a[class^=menu]，div[class^=content]'）。removeClass（'active'）；
//使内容处于活动状态
$（'#'+window.location.hash.substr（1））.addClass（'active'）；
//激活菜单
$（'a[href=“”+window.location.hash.substr（1）+''“]'）.addClass（“活动”）；
}
});
.container{
保证金：0自动；
背景色：#eee；
边框：1px纯色浅灰色；
宽度：20vw；
高度：90vh；
字体系列：无衬线；
位置：相对位置；
}
标题{
背景颜色：浅绿色；
填充物：5px；
文本对齐：居中；
文本转换：大写；
}
.底部导航栏{
位置：绝对位置；
底部：0；
宽度：100%；
填充：6px0；
溢出：隐藏；
背景颜色：浅绿色；
边框顶部：1px实心变量（--颜色-灰色-深色-3）；
z指数：50；
显示器：flex；
证明内容：之间的空间；
}
.底部导航栏>a{
显示：块；
颜色：绿色；
文本对齐：居中；
文字装饰：无；
字体大小：20px；
填充：0 10px；
}
.底部导航栏>a.激活{
颜色：黑色；
}
.menu-1.active，
.menu-2.active，
.menu-3.active{
颜色：黑色；
}
.content-1，
.content-2，
.内容-3{
显示：无；
}
.content-1.active，
.content-2.active，
.content-3.active{
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
}

我的头球
内部内容
地图内容
探索内容
如果类与当前页面url相同，则听起来您希望将其添加到导航中

如果您想在客户端执行此操作，类似这样的操作将起作用。
这也可以由服务器（php/c#）处理

类似的线程/问题-来自Rob M这里的anwser
您遇到的问题是您正在查找错误的
href

您试图查找
a[href=“secondPage”]
，但它应该是
a[href=“mywebsite”#secondPage”]

此外，我还改变了选择类并将它们添加为活动类的方式。这种方式更具活力

注意：在JS文件中，有一个名为
hash
的变量，现在它指向
#secondPage
为了假装我们在第二页，您可以更改该值，重新运行它，它将选择一个新的活动项。您只需将
散列
替换为
window.location.hash
，我还将其取出到一个变量中，这样您就不会每次调用它


//将其替换为“window.location.hash”
const hash=“#第二页”；
$（文档）.ready（函数（）{
$（'a[class^=menu]'）。单击（function（）{
//我们删除活动类。
$（'a[class^=menu]'）。removeClass（'active'）；
$（'div[class^=content]'）。removeClass（'active'）；
//我们获取单击的项目并选择该项目
//以动态的方式。
常量clickedClass=$（this.attr（'class'）；
常量[标识符，编号]=clickedClass.split（'-'））
$（`.${clickedClass}`）.addClass（'active'）；
$（`.content-${number}'）.addClass（'active'）；
});
const active=hash.substr（1）；
如果（活动！=''）{
$（'a[class^=menu]，div[class^=content]'）。removeClass（'active'）；
//使内容处于活动状态
$（`${active}`）addClass（'active'）；
//激活菜单
$（`a[href=“mywebsite”#${active}]`）.addClass（“active”）
}
});
.container{
保证金：0自动；
背景色：#eee；
边框：1px纯色浅灰色；
宽度：20vw；
高度：90vh；
字体系列：无衬线；
位置：相对位置；
}
标题{
背景颜色：浅绿色；
填充物：5px；
文本对齐：居中；
文本转换：大写；
}
.底部导航栏{
位置：绝对位置；
底部：0；
宽度：100%；
填充：6px0；
溢出：隐藏；
背景颜色：浅绿色；
边框顶部：1px实心变量（--颜色-灰色-深色-3）；
z指数：50；
显示器：flex；
证明内容：之间的空间；
}
.底部导航栏>a{
显示：块；
颜色：绿色；
文本对齐：居中；
文字装饰：无；
字体大小：20px；
填充：0 10px；
}
.底部导航栏>a.激活{
颜色：黑色；
}
.menu-1.active，
.menu-2.active，
.menu-3.active{
颜色：黑色；
}
.content-1，
.content-2，
.内容-3{
显示：无；
}
.content-1.active，
.content-2.active，
.content-3.active{
显示
$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})