Как динамически активировать элемент на панели навигации - Начальная загрузка

#javascript #html #jquery #navbar

Вопрос:

У меня есть 4 страницы, которые ссылаются друг на друга на панели навигации (index2.html/seite1, seite2, seite3.html). Я пытаюсь найти страницу, чтобы выделить текущую страницу на панели навигации, но мне удается сделать это только на долю секунды. Он становится красным, когда я нажимаю, но сразу же переключаюсь на «Дом»по умолчанию. Я застрял на этом несколько дней и не могу найти проблему. Есть ли петля на теге, которую я не вижу? Любая помощь будет признательна.

 <!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> 

<style>
.navbar-dark .nav-item > .nav-link.active  {
    color:white;
    background-color: red;
}
</style>


</head>

<body>
<div>

    <nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" >
        <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" style="padding-left: 0px;" href="index2.html">Home</a>
                </li>
                
                <li class="nav-item ">
                    <a class="nav-link " href="seite1.html">Page 1</a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link " href="seite2.html">Page 2</a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link " href="seite3.html">Page 3</a>
                </li>

            </ul>
        </nav>
    </div>
        

<script> 

$('.navbar-nav .nav-link').click(function(){
    $ ('.navbar-nav .nav-link').removeClass('active');
    $(this).addClass('active');

})  


</script>

</body>
</html>

Ответ №1:

если это просто HTML без какого-либо рендеринга на стороне сервера, то у вас есть 4 разных HTML-файла. На домашней странице только вкладка «Главная» должна иметь активный класс, на странице seite1 только вкладка seite1 должна иметь активный класс и т. Д