具有多个项目的导航，单击时添加类和删除类
具有多个项目的导航，单击时添加类和删除类
提问于 2020-05-21 05:09:55
我有一个有6个项目的导航，基本上我想添加一个active-nav类到任何一个点击的li上，然后我可以用它来在那个特定的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中
回答 2
Stack Overflow用户
发布于 2020-05-21 05:24:24
<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>Stack Overflow用户
发布于 2020-05-21 06:50:29
通过将HTML修改为如下所示：
<nav>
<div id="navigation">
<ul id="navigation-ul">
<li id="button-1" class="active"><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>然后，我可以使用这个jQuery来完成我的原始任务：
$('#navigation-ul').on('click', 'li', function() {
$('#navigation-ul li.active').removeClass('active');
$(this).addClass('active');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61922956
复制相关文章
相似问题
腾讯云开发者
