javascript - Setting active class when loading navbar through Jquery

I'm trying to use jquery to initialize the active class for a navigation menu when loading it as a separate html file.

I am not familiar with PHP and I'm pretty new to website generation, so I'm not very fortable with JS and the integration between the usual languages (HTML, CSS, and JS). I've searched throughout Stack Overflow and tried a couple of solutions but I am clearly missing something:

Navbar active class resets on page load
JQuery Active Class Error when page is not in navbar
Bootstrap navbar active class
Jquery Active page link

I think my problem has to do with waiting on the page to load. I implemented an "on click" function that works, but when I actually load a page in the menu, it does set the class to active in <li>.

EDIT: To clarify, I successfully set the active class with the click event, the background will change to blue. However, when the link for the menu is actually activated, the background flashes blue and then reloads as black. I am trying to figure out how to set the active class when the navigation menu is being called through Jquery. To prove my style is working on a click event, please see the screenshot here.

Here is a simplified version of what I have right now:

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>Wele! This is my website.</p>
            </div>
        </div>
    </div>

</div>
</body>

</html>

nav.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=".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>

style.css

.navbar {
    width: 1000px;
    background: #000;
    text-align: left;
}

.navbar ul {
    margin: 0px;
    padding: 0px;
}

.navbar ul li {
    list-style-type: none;
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

.navbar ul li .active{
    background: #33b;
}

.navbar ul li a:hover {
    border-bottom:3px #FFF solid;
}

.navbar a:link {
    color: #fff;
    text-decoration: none;
}

.navbar a:visited {
    color: #fff;
    text-decoration: none;
}

I expected to get a blue highlight for the current item in the navigation menu. When clicked on but not selected (i.e. page does not actually load), this is successfully set to the active class (background is blue).

I'm trying to use jquery to initialize the active class for a navigation menu when loading it as a separate html file.

Navbar active class resets on page load
JQuery Active Class Error when page is not in navbar
Bootstrap navbar active class
Jquery Active page link

I think my problem has to do with waiting on the page to load. I implemented an "on click" function that works, but when I actually load a page in the menu, it does set the class to active in <li>.

Here is a simplified version of what I have right now:

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>Wele! This is my website.</p>
            </div>
        </div>
    </div>

</div>
</body>

</html>

nav.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./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>

style.css

.navbar {
    width: 1000px;
    background: #000;
    text-align: left;
}

.navbar ul {
    margin: 0px;
    padding: 0px;
}

.navbar ul li {
    list-style-type: none;
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

.navbar ul li .active{
    background: #33b;
}

.navbar ul li a:hover {
    border-bottom:3px #FFF solid;
}

.navbar a:link {
    color: #fff;
    text-decoration: none;
}

.navbar a:visited {
    color: #fff;
    text-decoration: none;
}

Share Improve this question edited Jul 24, 2019 at 8:46 asked Jul 24, 2019 at 5:42 Liz Livingston 952 silver badges8 bronze badges

1 add your click event in document.ready. – Sumit Patel Commented Jul 24, 2019 at 5:45
do you want to set the class active on click of a navitem(li) and show a blue background? – Soothran Commented Jul 24, 2019 at 5:57
@SumitPatel You mean add something like $(document).ready(function() { (clickeventcode) }); to my nav.html file? – Liz Livingston Commented Jul 24, 2019 at 8:27
right add inside document.ready – Sumit Patel Commented Jul 24, 2019 at 8:28
@Soothran I want the page that is open to be considered active. So when first opening the site, "Index" should have a blue background. When switching to "References", Index should be black and References should be blue. – Liz Livingston Commented Jul 24, 2019 at 8:30

| Show 7 more ments

2 Answers 2

Sorted by: Reset to default 3

you are facing this issue as the styling is not getting applied to the li items. .navbar ul li .active will look for an element with class .active in following hierarchy .navbar element -> ul element -> li element -> .active element.

Whereas you want the styling to be applied to the li element with class .active. For that, you need to mention the selector as below.

(no space between tag and classname)

.navbar ul li.active{
    background: #33b;
}

the above selector will refer to a li element with .active class. If you are interested then you can read more about the selectors here and here

index.html

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery./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>Wele! This is my website.</p>
            </div>
        </div>
    </div>

</div>
</body>

</html>

nav.html

<div class="navbar">
    <ul id="navItems">
        <li><a href="/index.html" id="navHome">Home</a></li>
        <li><a href="/ref.html" id="navRef">References</a></li>
    </ul>
<script>
      $(function(){
    var current = location.pathname;
    $('#navItems li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.parent().addClass('active');
        }
    })
})
</script>
</div>

in css change the active class style

.navbar ul li.active{
    background: #33b;
}

Try this.

I have add the active class to li default so once it load the home will be default active.

and also update the css for active li.

Index.html

<!DOCTYPE html>
<html>

<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare./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>Wele! 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>

nav.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>

style.css

.navbar {
    width: 1000px;
    background: #000;
    text-align: left;
}

.navbar ul {
    margin: 0px;
    padding: 0px;
}

.navbar ul li {
    list-style-type: none;
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

.navbar ul li.active {
    background: #33b;
}

.navbar ul li a:hover {
    border-bottom: 3px #FFF solid;
}

.navbar a:link {
    color: #fff;
    text-decoration: none;
}

.navbar a:visited {
    color: #fff;
    text-decoration: none;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Setting active class when loading navbar through Jquery - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)