Question

我在这里搜索了这个主题，但我的设置有点不同所以我仍然有问题。任何帮助都会很棒！这可能是一件非常简单的事情，我一直在寻找。

代码应该对我想要做的事情有意义。 SVG颜色变化应该在点击功能中发生。

HTML

<ul class="nav-container">
    <li class="nav-selected">
        <a href="#0">Home</a>
    </li>

    <li>
        <a href="#0">About</a>
    </li>

    <li>
        <a href="#0">Projects</a>
    </li>

    <li>
        <a href="#0">Blog</a>
    </li>

    <li>
        <a href="#0">Contact</a>
    </li>
</ul>

CSS

.nav-container li:first-of-type a::before {
    background-image: url(img/icon-1.svg);
}
.nav-container li:nth-of-type(2) a::before {
    background-image: url(img/icon-2.svg);
}
.nav-container li:nth-of-type(3) a::before {
    background-image: url(img/icon-3.svg);
}
.nav-container li:nth-of-type(4) a::before {
    background-image: url(img/icon-4.svg);
}
.nav-container li:nth-of-type(5) a::before {
    background-image: url(img/icon-5.svg);
}

.nav-container .nav-selected a {
    background-color: #222427;
}

JQuery的

$('.nav-container a').on('click', function(){
    var selected = $(this);
    selected.parent('li').addClass('nav-selected').siblings('li').removeClass('nav-selected');

    // UPDATE COLOR SVG COLOR HERE
});

Answer 1

首先，要知道SVG文件没有像CSS这样的background属性;相反，SVG图像使用fill属性。其次，因为您在CSS background-image属性中使用SVG图像，所以无法更改SVG元素的fill属性。

更改fill的最佳方法是将SVG代码直接包含在正文中，然后通过CSS控制外观。

HTML：

<ul class="nav-container">
  <li class="nav-item nav-item-active">
    <a href="#0">
      <span>Home</span>
      <span>
        <svg class="nav-item-background>
          <!-- ... -->
        </svg>
      </span>
    </a>
  </li> 
</ul>

CSS：

.nav-item .nav-item-background {
  fill: #fff;
}

.nav-item-active .nav-item-background {
  fill: #000;
}

JS：

$('.nav-container a').on('click', function(){
    var selected = $(this);
    selected.parent('li').addClass('nav-item-active').siblings('li').removeClass('nav-item-active');
});

单击更改JQuery中的SVG颜色

1 个答案: