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

Question

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

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

HTML

<ul>
      <li class="menu-item"><a href="#">HOME</a></li>
      <li class="menu-item"><a href="#">COMPANY PROFILE</a></li>
      <li class="menu-item"><a href="#">PRODUCTS</a></li>
      <li class="menu-item"><a href="#">CONTACT US</a></li>
      <li class="menu-item"><a href="#">ENQUIRY</a></li>
</ul>

CSS

.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;
}

JQUERY

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

请让我知道我在哪里犯了错误？

Answer 1

你的代码很好，除了你的 jQuery。您想要的是在将active 应用于新元素之前，删除应用于任何menu-item a 元素的任何active 类。检查下面的 jQuery 部分：

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

.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: #871304;
  color: black;
  border-radius: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul>
  <li class="menu-item"><a href="#">HOME</a>
  </li>
  <li class="menu-item"><a href="#">COMPANY PROFILE</a>
  </li>
  <li class="menu-item"><a href="#">PRODUCTS</a>
  </li>
  <li class="menu-item"><a href="#">CONTACT US</a>
  </li>
  <li class="menu-item"><a href="#">ENQUIRY</a>
  </li>
</ul>

Answer 2

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

如果你只是想让它在单个页面上工作，你需要更改你的 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)
});