Javascript 通过Jquery加载导航栏时设置活动类_Javascript_Html_Css

Javascript 通过Jquery加载导航栏时设置活动类

javascript html css

Javascript 通过Jquery加载导航栏时设置活动类,javascript,html,css,Javascript,Html,Css,我试图使用jquery在将导航菜单的活动类作为单独的html文件加载时初始化它我不熟悉PHP，而且我对网站的生成还很陌生，所以我对JS以及常用语言（HTML、CSS和JS）之间的集成不太熟悉。我已经搜索了整个堆栈溢出，并尝试了几种解决方案，但我显然遗漏了一些东西：我认为我的问题与等待页面加载有关。我实现了一个可以工作的“点击”功能，但是当我在菜单中实际加载一个页面时，它会在中将类设置为活动编辑：为了澄清，我成功地通过单击事件设置了活动类，背景将变为蓝色。但是，当菜单链接实际激活

我试图使用jquery在将导航菜单的活动类作为单独的html文件加载时初始化它

我不熟悉PHP，而且我对网站的生成还很陌生，所以我对JS以及常用语言（HTML、CSS和JS）之间的集成不太熟悉。我已经搜索了整个堆栈溢出，并尝试了几种解决方案，但我显然遗漏了一些东西：

我认为我的问题与等待页面加载有关。我实现了一个可以工作的“点击”功能，但是当我在菜单中实际加载一个页面时，它会在

中将类设置为活动

编辑：为了澄清，我成功地通过单击事件设置了活动类，背景将变为蓝色。但是，当菜单链接实际激活时，背景闪烁蓝色，然后重新加载为黑色。我试图弄清楚如何在通过Jquery调用导航菜单时设置活动类。为了证明我的风格在点击事件中起作用，请查看屏幕截图

以下是我现在所拥有的内容的简化版本：

index.html

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
</head>

<body>
<div class="container">
    <!--Navigation bar-->
    <div id="nav-placeholder"></div>
    <script>
            $("#nav-placeholder").load("nav.html");
    </script>
    <!--end of Navigation bar-->

    <div class="mainBlock">
        <div class="mainPage">
            <div class="mainContent">
                <p>Welcome! This is my website.</p>
            </div>
        </div>
    </div>

</div>
</body>

</html>

<!DOCTYPE html>
<html>
<div class="navbar">
    <ul>
        <li><a href="/index.html" id="navHome">Home</a></li>
        <li><a href="/ref.html" id="navRef">References</a></li>
    </ul>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).on("click", "ul li", function(){
            $('.navbar li').removeClass('active');
            $(this).addClass("active");
        })
    </script>

        // Inserted scripts here based on other stackoverflow posts
</div>
</html>

<!DOCTYPE html>
<html>

<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
</head>

<body>
<div class="container">
    <!--Navigation bar-->
    <div id="nav-placeholder"></div>
    <script>
        $("#nav-placeholder").load("nav.html");
    </script>
    <!--end of Navigation bar-->

    <div class="mainBlock">
        <div class="mainPage">
            <div class="mainContent">
                <p>Welcome! This is my website.</p>
            </div>
        </div>
    </div>
    <div id="nav-placeholder"></div>

</div>

<script type="text/javascript">
    $(document).on("click", "ul li", function () {
        $('.navbar li').removeClass('active');
        $(this).addClass("active");
    })
</script>
</body>

</html>

<div class="navbar">
<ul>
    <li class="active"><a href="#" id="navHome">Home</a></li>
    <li><a href="#" id="navRef">References</a></li>
</ul>
</div>

我希望导航菜单中的当前项有一个蓝色突出显示。单击但未选择时（即，页面未实际加载），这将成功设置为活动类（背景为蓝色）。

您将面临此问题，因为样式未应用于li项目

.navbar ul li.active

将在以下层次结构中查找类为

.active

的元素。navbar元素->ul元素->li元素->active元素

而您希望将样式应用于类为

.active

的li元素。为此，您需要在下面提到选择器

（标记和类名之间没有空格）

上述选择器将引用具有.active类的li元素。如果您感兴趣，那么您可以阅读有关选择器和

index.html

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>

<body>
<div class="container">
    <!--Navigation bar-->
    <div id="nav-placeholder"></div>
    <script>
            $("#nav-placeholder").load("nav.html");
    </script>
    <!--end of Navigation bar-->

    <div class="mainBlock">
        <div class="mainPage">
            <div class="mainContent">
                <p>Welcome! This is my website.</p>
            </div>
        </div>
    </div>

</div>
</body>

</html>

您正面临此问题，因为样式未应用于li项目

.navbar ul li.active