Question

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

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

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部分：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

2 个答案: