Html 如何设置菜单活动链接背景

我想将活动链接背景设置为某种颜色，即使移动到单击的URL。 我尝试过这个，但它正在改变背景，但当它导航到单击的URL时，所有东西都设置为默认值

我正在尝试使用JQuery将活动类添加到单击的菜单中。代码是这样的

HTML

JQUERY

---

请告诉我哪里出错了？

如果您实际上要链接到不同的页面，则需要突出显示您所在页面的菜单项。但看起来您可能正在使用jQueryDOM构建一个单页站点

如果你只想在一个页面上运行，你需要修改你的JS代码。你现在基本上是这样说的：

单击菜单项时。。。 选择所有菜单项 向它们添加活动类 为每个实际上不起任何作用的菜单项选择所有同级菜单项 从中删除活动类 所以这显然不是你想要的。要仅对单击的项目进行操作，请使用$this选择器，如下所示：

$(".menu-item a").click(function(){  // When a menu item is clicked
    $(".menu-item a").removeClass('active'); // Select all menu items and remove active class
    $(this).addClass('active');              // Add active class to THIS menu item (that was clicked)
});

---

除了jQuery之外，您的代码都很好。您想要的是在将活动类应用于新元素之前，删除应用于元素的任何菜单项的任何活动类。检查下面的jQuery部分：

$function{ $。菜单项a.单击功能{ $。菜单项a.removeClassactive； $this.addClassactive； }; }; .菜单项a{ 文字装饰：无； 颜色：FFF； 字体大小：粗体； 填充：7px 15px； 线高：43px； 字体系列：Lucida Sans Unicode、Lucida Grande、Sans serif； 字体大小：13px； 字母间距：1px； 文本阴影：2px2p555； } .菜单项a：悬停{ 背景：871304； 不透明度：0.8； 边界半径：20px； } .菜单项.活动{ 背景色：871304； 颜色：黑色； 边界半径：20px； }

---

在链接到的页面的HTML中执行此操作。如果您正在更改HTML，则需要一种方法来存储值或在您要识别活动链接的页面中读取。我明白您在这里所说的。但我需要突出显示该链接，即使在到达之前单击过的新页面时也是如此。在这种情况下，您可以更改每个页面的HTML背景。但如果你需要按程序进行，

.menu-item a{
text-decoration: none;
color: #FFF;
font-weight: bold;
padding: 7px 15px;
line-height: 43px;
font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
font-size: 13px;
letter-spacing: 1px;
text-shadow: 2px 2px #555;
}
.menu-item a:hover{
background: #871304;
opacity: 0.8;
border-radius: 20px;
}
.menu-item .active{
background-color:#FFF;
color:black;
border-radius: 20px;
}

$(".menu-item a").click(function(){
    $(".menu-item a").addClass('active').siblings().removeClass('active');
    });

$(".menu-item a").click(function(){  // When a menu item is clicked
    $(".menu-item a").removeClass('active'); // Select all menu items and remove active class
    $(this).addClass('active');              // Add active class to THIS menu item (that was clicked)
});