使用JQ实现导航点击之后高亮选中

原创已于 2023-06-09 10:09:39 修改 · 636 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript #开发语言

于 2023-06-09 10:06:27 首次发布

HTML、CSS、JS和jQ的前端开发应用专栏收录该内容

25 篇文章

订阅专栏

这段代码展示了如何使用CSS和jQuery实现导航菜单的高亮效果。默认情况下，第一个导航项被设置为高亮。当用户点击任一导航项时，所有其他项的高亮被移除，而当前点击的项则获得高亮。这有助于提升用户体验，明确当前选中的菜单项。

    <style>
        .active {
            color: red;
        }
    </style>

<div class="nav">
        <ul>
            <li class="nav-item">11111111111</li>
            <li class="nav-item">222222222222</li>
            <li class="nav-item">333333333333</li>
            <li class="nav-item">33333333333</li>
        </ul>
    </div>

<script src="./js/jquery.js"></script>
    <script>
        $(document).ready(function () {
            // 默认选中第一个导航项  
            $('.nav-item').first().addClass('active');
            // 点击导航项切换高亮 
            $('.nav-item').click(function () {
                $('.nav-item').removeClass('active');
                // 移除所有导航项的高亮    
                $(this).addClass('active');
                // 给当前点击的导航项添加高亮  
            });
        });
    </script>

上述代码中：

首先通过 $('.nav-item').first().addClass('active') 给第一个导航项添加高亮样式。

然后通过 $('.nav-item').click(function() { ... }) 给所有导航项添加点击事件，当点击某个导航项时，先通过 $('.nav-item').removeClass('active') 移除所有导航项的高亮

再通过 $(this).addClass('active') 给当前点击的导航项添加高亮。

其中，.nav-item 是导航项的类名，.active 是高亮样式的类名，可以根据实际情况进行修改。