根据菜单选择填充 SVG

Question

我希望在选择或激活菜单项时填充 SVG。我在页面加载时在 svg 中使用 svg-outline 类。我想要 svg-outline2 类当 li active in menu item 启用时。

CSS

 .svg-outline {
    stroke: #377ca7;
    fill: none;
    margin-left: 7px;
    width: 40px !important;
    height: 40px !important;
  }

  .svg-outline2 {
    stroke: #fff !important;
    fill: #377ca7 !important;
  }

jQuery

  $(document).ready(function() {
  $("svg").addClass("svg-outline");
  });


  $(document).ready(function() {
  $('.side-menu li:active a').on('click', function() {
    $('.svg-outline').addClass('svg-outline2');
    })

});

导航菜单

    <ul class="nav side-menu">
                  <li></li>
    <li class="active">
                      <a href="#shiny-tab-summary" data-toggle="tab" data-value="summary">
                        <i><svg fill="currentColor" viewBox="0 0 20 20" class="svg-outline"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg></i>
                        <span>Overview</span>
                      </a>
                    </li>
<li>
                </li><li>
                  <a href="#shiny-tab-comparison" data-toggle="tab" data-value="comparison">
                    <i><svg fill="currentColor" viewBox="0 0 20 20" class="svg-outline"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg></i>
                    <span>REOs Stock</span>
                  </a>
                </li>

              <li>
                </li><li>
                  <a href="#shiny-tab-details" data-toggle="tab" data-value="details">
                    <i><svg fill="currentColor" viewBox="0 0 20 20" class="svg-outline"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"></path></svg></i>
                    <span>Region Analysis</span>
                  </a>
                </li>

            </ul>

Answer 1

我已更新 jquery 代码以在 li 活动时添加 svg-outline2 类。

$(document).ready(function() {
  $("svg").addClass("svg-outline")
  $('.side-menu li.active .svg-outline').addClass('svg-outline2')
  
  $('.side-menu li').on('click', function() {
    if ($('.side-menu li').hasClass('active')) {
      $('.side-menu li.active .svg-outline').removeClass('svg-outline2')
      $('.side-menu li.active').removeClass('active')
    }
    $(this).addClass('active')
    $('.side-menu li.active .svg-outline').addClass('svg-outline2')
  })
});

.svg-outline {
  stroke: #377ca7;
  fill: none;
  margin-left: 7px;
  width: 40px !important;
  height: 40px !important;
}

.svg-outline2 {
  stroke: #fff !important;
  fill: #377ca7 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<ul class="nav side-menu">
  <li></li>
  <li class="active">
    <a href="#shiny-tab-summary" data-toggle="tab" data-value="summary">
      <i><svg fill="currentColor" viewBox="0 0 20 20" class="svg-outline"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg></i>
      <span>Overview</span>
    </a>
  </li>
  <li>
  </li>
  <li>
    <a href="#shiny-tab-comparison" data-toggle="tab" data-value="comparison">
      <i><svg fill="currentColor" viewBox="0 0 20 20" class="svg-outline"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg></i>
      <span>REOs Stock</span>
    </a>
  </li>

  <li>
  </li>
  <li>
    <a href="#shiny-tab-details" data-toggle="tab" data-value="details">
      <i><svg fill="currentColor" viewBox="0 0 20 20" class="svg-outline"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"></path></svg></i>
      <span>Region Analysis</span>
    </a>
  </li>

</ul>