Question

我有一个用于导航的静态代码，

<div class="nav__show-hide--800 step-asia__grid">
  <div class="step-asia__grid-12--col-5">
    <div class="nav__left">
      <a href="http://localhost/step-asia/about.php">About Us</a>
      <a href="http://localhost/step-asia/whatwedo.php">What We Do</a>
    </div>
  </div>
  <div class="step-asia__grid-12--col-2">
    <div class="nav__logo nav__logo--height">
      <a href="http://localhost/step-asia/" id="logo"><img src="assets/image/logo-1.png" alt="Step Asia Logo"></a>
    </div>
  </div>
  <div class="step-asia__grid-12--col-5">
    <div class="nav__right">
      <a href="http://localhost/step-asia/how-it-works.php">How It Works</a>
      <a href="http://localhost/step-asia/contact.php">Contact Us</a>
    </div>
  </div>
</div>

和jquery确定当前页面并添加活动类以使下划线作为悬停效果以指示用户访问的当前页面

$(document).ready(function() {
  $("[href]").each(function() {
    if (this.href == window.location.href) {
      if (! $('#logo')) {
        $(this).addClass("active");         
      }
    }
  });
});

但我想排除这部分

<a href="http://localhost/step-asia/" id="logo"><img src="assets/image/logo-1.png" alt="Step Asia Logo"></a>

有没有更好的主意？

Answer 1

使用.not()从选择器中排除特定元素。

$("[href]").not("#logo").each(function() {
    if ($(this).attr("href") === window.location.href) {
        $(this).addClass("active");         
    }
});

或最终代替.not()或:not()您可以直接进入 if ：

if (this.id !== "logo" && this.getAttribute("href") === window.location.href) {

Answer 2

这可以使用简单的CSS来完成。在你的情况下：

.active #logo:hover{
  text-decoration:none !important;
}

您可以将活动类添加到徽标中，但这会覆盖该徽标。

在jquery中排除访问/悬停效果的徽标部分

2 个答案: