Question

我正在尝试使用Bootstrap和JQuery创建侧边栏。我编写了一些JQuery代码来标记最后一次单击为活动的<li>元素。当我的代码被注释掉时，侧边栏就可以工作了。但是当我启用它时，侧边栏不再在单击时重定向到页面。突出显示确实有效。

JQuery代码：

<script type="text/javascript">
    $(document).ready(function () {
        "use strict";

        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

我的侧边栏：

ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="./">
                    <span data-feather="home"></span>
                    Dashboard
                    <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="clock"></span>
                    Recently added data
                </a>
            </li>
        </ul>


        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1">
            <span>DATA</span>
        </h6>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="./applications">
                    <span data-feather="aperture"></span>
                    Applications
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="./ships">
                    <span data-feather="anchor"></span>
                    Ships
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">
                    <span data-feather="users"></span>
                    Users
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="./containertypes">
                    <span data-feather="anchor"></span>
                    Container types
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">
                    <span data-feather="terminal"></span>
                    Terminals
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">
                    <span data-feather="alert-triangle"></span>
                    Conflicts
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">
                    <span data-feather="box"></span>
                    UNDGs
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link " href="#">
                    <span data-feather="map-pin"></span>
                    Ports
                </a>
            </li>
        </ul>

我知道有些链接没有参考。这是因为那些页面还不存在。不，我不是想去那些页面我很茫然，之前从未真正使用过JQuery 一些帮助将非常感激！

Answer 1

只需删除e.preventDefault()（因为页面不存在，您会看到您的项目在获得404：D之前非常短暂地变为活动状态），但您可以发出警告＆＃34;在改变风格后，看它是否真的有效。

Answer 2

我相信e.preventDefault();阻止点击传播到li代码中的主播。

我倾向于在页面加载后更新active类，而不是在跟随锚点之前。

供参考：https://api.jquery.com/event.preventdefault/

使用JQuery脚本和Bootstrap时链接不起作用

2 个答案: