html 在列表元素中单击时添加类“活动”< a>，从未单击的元素中删除类[已关闭]

thigvfpy 于 2022-12-09 发布在其他

关注(0)|答案(2)|浏览(141)

已关闭。此问题需要更多focused。当前不接受答案。
**想要改进此问题吗？**更新问题，使其仅关注editing this post的一个问题。

<ul class="list-unstyled">
     <li><a href="#one" class="bd-links-link d-inline-block rounded active">ONE</a></li>
     <li><a href="#two" class="bd-links-link d-inline-block rounded">TWO</a></li>
     <li><a href="#three" class="bd-links-link d-inline-block rounded">THREE</a></li>
     <li><a href="#four" class="bd-links-link d-inline-block rounded">FOUR</a></li>
     <li><a href="#five" class="bd-links-link d-inline-block rounded">FIVE</a></li>
 </ul>

每当我点击不同的链接，它会自动将活动类应用到选定的链接，并从其他链接删除活动类。

Html

来源：https://stackoverflow.com/questions/74736111/add-class-active-on-clicked-a-in-list-element-remove-class-from-not-clicked

2条答案

按热度按时间

sg24os4d1#

如果您使用的是jQuery，请尝试以下操作

$('.bd-links-link').click(e => {
 // Remove active from all li
 $(e.currentTarget).closest('ul').find('li a.active').removeClass('active')
 // Set active to current clicked li
 $(e.currentTarget).addClass('active')
})

赞(0）回复(0）举报 2022-12-09

41zrol4v2#

我不知道这里有什么问题，但我会尽力帮助你的。

<ul class="list-unstyled">
     <li><a onClick='toggleClick(this);' href="#one" class="bd-links-link d-inline-block rounded active">ONE</a></li>
     <li><a onClick='toggleClick(this);' href="#two" class="bd-links-link d-inline-block rounded">TWO</a></li>
     <li><a onClick='toggleClick(this);' href="#three" class="bd-links-link d-inline-block rounded">THREE</a></li>
     <li><a onClick='toggleClick(this);' href="#four" class="bd-links-link d-inline-block rounded">FOUR</a></li>
     <li><a onClick='toggleClick(this);' href="#five" class="bd-links-link d-inline-block rounded">FIVE</a></li>
 </ul>

现在我们创建一个名为toggleClick(elm)的函数：

<script>
function toggleClick(elm) {
    // Get all Elements with class 'active' and remove the class.
    for(let e of document.getElementsByClassName('active')) {
         e.classList.remove('active');
    }
    // add class 'active' to clicked element.
    elm.classList.add('active');
}
</script>

干得好，就这样。
完整代码：

<html lang='en'>
    <head>
        <title>Test</title>
    </head>
    <body>
        <ul class="list-unstyled">
            <li><a onClick='toggleClick(this);' href="#one" class="bd-links-link d-inline-block rounded active">ONE</a></li>
            <li><a onClick='toggleClick(this);' href="#two" class="bd-links-link d-inline-block rounded">TWO</a></li>
            <li><a onClick='toggleClick(this);' href="#three" class="bd-links-link d-inline-block rounded">THREE</a></li>
            <li><a onClick='toggleClick(this);' href="#four" class="bd-links-link d-inline-block rounded">FOUR</a></li>
            <li><a onClick='toggleClick(this);' href="#five" class="bd-links-link d-inline-block rounded">FIVE</a></li>
        </ul>
        <script>
            function toggleClick(elm) {
                // Get all Elements with class 'active' and remove the class.
                for(let e of document.getElementsByClassName('active')) {
                    e.classList.remove('active');
                }
                // add class 'active' to clicked element.
                elm.classList.add('active');
            }
        </script>
    </body>
</html>

赞(0）回复(0）举报 2022-12-09

我来回答

html 在列表元素中单击时添加类“活动”< a>，从未单击的元素中删除类[已关闭]

2条答案

相关问题

热门标签

最新问答