Javascript 使用jquery addClass（）/removeClass（）更改默认行为_Javascript_Html_Jquery

Javascript 使用jquery addClass（）/removeClass（）更改默认行为

javascript html jquery

Javascript 使用jquery addClass（）/removeClass（）更改默认行为,javascript,html,jquery,Javascript,Html,Jquery,Hii我是jquery的新手，我想在单击另一个链接进行导航之前，将活动类添加到li标记中或从中删除活动类。目前，我对所有Html页面使用相同的导航这是我的index.html文件 <body> <div id="nav_bar">  </div>

Hii我是jquery的新手，我想在单击另一个链接进行导航之前，将活动类添加到li标记中或从中删除活动类。目前，我对所有Html页面使用相同的导航

这是我的index.html文件

<body>
    <div id="nav_bar">
        <!-- <a href="navigation/navigation.html">link</a> -->
    </div>
    <script>
        $(function() {
            $("#nav_bar").load("navigation/navigation.html");
        });
    </script>
</body>


$（函数（）{
$（“#导航栏”）.load（“navigation/navigation.html”）；
});

我已经对其他Html文件应用了相同的方法，效果很好。

Navgation.html

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end " id="nav_global ">
        <button class="navbar-toggler " type="button " data-toggle="collapse " data-target="#navbarNav" aria-controls="navbarNav " aria-expanded="false " aria-label="Toggle navigation ">
        <span class="navbar-toggler-icon "></span>
      </button>
        <div class="collapse navbar-collapse " id="navbarNav ">
            <ul class="nav navbar-nav mr-auto ">
                <li class="nav-item active" id="home ">
                    <a class="nav-link " href="/assignment/index.html ">Home</a>
                </li>
                <li class="nav-item " id="assignment ">
                    <a class="nav-link " href="/assignment/assign/assignment.html ">Assignment</a >
                </li>
            </ul>
        </div>
    </nav>

    <script>
        alert("hello from script ");


        $("li.nav-item").click(function(event) {
            let someVar = $(this).hasClass("active");
            alert(someVar);
            if (someVar == false) {
                $("li.nav-item").each(function(i) {
                    $(this).removeClass("active");
                });
                $(this).addClass("active");

            }
        });
    </script>
</body>






分配


警报（“脚本中的你好”）；
$（“li.nav项”）。单击（函数（事件）{
让someVar=$（this.hasClass（“active”）；
警报（someVar）；
if（someVar==false）{
$（“li.nav项目”）。每个（功能（i）{
$（此）.removeClass（“活动”）；
});
$（此）.addClass（“活动”）；
}
});

现在的问题是，当我单击一个链接并显示警报后，更改会立即恢复，这意味着即使在使用removeClass（）之后，主页也会重新激活。不知何故，addClass对单击的链接所做的更改会暂时导致主页重新激活。我使用了return false和event.preventDefault（），但它阻止了我打开我不想要的链接。我想使单击的链接li类处于活动状态。

ps：对不起，我的英语和解释不好。如果您发现一些错误，请随时更正我的问题。

感谢您

仅使用OP中的两个链接，以下是我建议尝试的内容

<script>
    $( () => {
        const data = [
            { suffix: '/index.html', selector: '#home' },
            { suffix: '/assignment.html', selector: '#assignment' }
        ];

        const currentPage = data.find( it =>
            window.location.href.endsWith( it.suffix )
        );

        if ( currentPage ) {
            $( currentPage.selector ).addClass( 'active' );
        }
    } );
</script>


$( () => {
常数数据=[
{后缀：'/index.html'，选择器：'#home'}，
{后缀：'/assignment.html'，选择器：'#assignment'}
];
const currentPage=data.find（它=>
window.location.href.endsWith（it.suffix）
);
如果（当前页）{
$（currentPage.selector）.addClass（'active'）；
}
} );

在document ready上，创建地图列表，在每个页面的url和指向该页面的链接的选择器之间创建关系。然后，您可以根据当前url找到关系，如果找到关系，请查找链接并将活动类放在其上。

您的代码运行正常。当我单击“主页”时，

活动的

类被添加，当我单击

作业

时，

活动的

被添加到该类中。@Alwayshilling但不为我工作。但是你能和我分享一下你是如何测试它的吗？这里工作很好：-让我知道导航链接看起来像真实的链接，所以他们将执行页面转换。这意味着您的旧页面以及javascript所做的所有更改都将被销毁。您已经在尝试使用返回false和preventingDefault时部分发现了这一点。阻止页面导航的事实表明了您的问题。如果希望类保持不变，则需要添加逻辑，以便在加载页面后将活动类恢复到所需的链接……。或者在动态添加的元素上从

.load

@Taplar执行

事件委派？