时间戳

首页 > 解决方案 > 带有多个项目的导航，单击时添加类和删除类

jquery - 带有多个项目的导航，单击时添加类和删除类

问题描述

我有一个包含 6 个项目的导航，基本上我想在单击的任何 li 上添加一个 active-nav 类，然后我可以使用它来在该特定 li 上触发动画。虽然添加该类很容易，但我需要在单击另一个 li 时删除该类，然后将该类添加到新单击的 li 中。

<nav>
  <div id="navigation">
    <ul>
      <li id="button-1"><button>1</button></li>
      <li id="button-2"><button>2</button></li>
      <li id="button-3"><button>3</button></li>
      <li id="button-4"><button>4</button></li>
      <li id="button-5"><button>5</button></li>
      <li id="button-6"><button>6</button></li>
    </ul>
    <div id="outline"></div>
  </div>
</nav>

基本上，如果我单击#button-1，我需要向其中添加一个活动类，但是如果我然后单击#button-4，我需要从#button-1 中删除该类，然后将其添加到#button-4

标签： jquery

解决方案

<nav>
  <div>
    <ul id="navigation">
      <li id="button-1" onclick="setActive('button-1')"><button>1</button></li>
      <li id="button-2" onclick="setActive('button-2')"><button>2</button></li>
      <li id="button-3" onclick="setActive('button-3')"><button>3</button></li>
      <li id="button-4" onclick="setActive('button-4')"><button>4</button></li>
      <li id="button-5" onclick="setActive('button-5')"><button>5</button></li>
      <li id="button-6" onclick="setActive('button-6')"><button>6</button></li>
    </ul>
    <div id="outline"></div>
  </div>
</nav>

<script type="text/javascript">
    function setActive(button){
      $("#navigation").children().removeClass("active");
      $("#" + button).addClass("active");
    }
</script>

推荐阅读