Setting active class when loading navbar through Jquery

Question

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 comfortable 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:

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>Welcome! 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.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>

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

do you want to set the class active on click of a navitem(li) and show a blue background? — Soothran, Jul 24 '19 at 05:57
@SumitPatel You mean add something like `$(document).ready(function() { (clickeventcode) });` to my nav.html file? — Liz Livingston, Jul 24 '19 at 08:27
@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, Jul 24 '19 at 08:30
@SumitPatel Maybe I'm not understanding, I added that one simple line and it still isn't working. ```$(document).ready(function() { $(document).on("click", "ul li", function(){ $('.navbar li').removeClass('active'); $(this).addClass("active"); }) });``` — Liz Livingston, Jul 24 '19 at 08:32
just making my self clear that when first time your page load you done have any menu as active right? — Sumit Patel, Jul 24 '19 at 08:39
in that case add active class default to the li which will resolve your problem — Sumit Patel, Jul 24 '19 at 08:41
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/196908/discussion-between-sumit-patel-and-liz-livingston). — Sumit Patel, Jul 24 '19 at 08:45
@LizLivingston i added the answer will resolve your problem. — Sumit Patel, Jul 24 '19 at 08:50

Soothran · Accepted Answer · 2019-07-24T09:46:26.360

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

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;
}

I don't think the space is my issue. I know the active class is being set successfully, just not under the conditions I want. - I can click on the navigation menu without activating the href. This sets the class to active and the background changes to blue. - When activating the href (i.e. if I am on the index.html page and click "Home" to essentially refresh the page or "References" to switch pages), the background remains black. — Liz Livingston, Jul 24 '19 at 08:24
@LizLivingston If the page is getting refreshed once you click the menu items, then you need to check the url and assign active class to respective nav item — Soothran, Jul 24 '19 at 08:57
if so, then try this https://stackoverflow.com/questions/20060467/add-active-navigation-class-based-on-url — Soothran, Jul 24 '19 at 08:58
Somehow I lost that exact link that I did try to implement. Your answer helps me know where to implement that code, but it still isn't working. In fact, without the click handling, nothing turns blue at all — Liz Livingston, Jul 24 '19 at 09:17

Sumit Patel · Answer 2 · 2019-07-24T09:17:53.867

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

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;
}

Setting active class when loading navbar through Jquery

2 Answers2