if statement for html/jquery

Question

<div class="collapse navbar-collapse navbar-right">
    <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about-us.html">About Us</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li> 
        <li><a href="contact-us.html">Contact</a></li>                        
    </ul>
</div>

I have the above code, which highlights Home button, since class is set to active.

What I want to do is, I want to put some sort of if condition, which detects which html files are loaded, and set class to active.

Probably something like <li (if loaded.(about-us.html):class="active"><a href="about-us.html">About Us</a></li> But this did not work.

It's a question. Did something confuse you? If so I'll edit. — Toshihiro M Sakurai
– Toshihiro M Sakurai, Commented Oct 30, 2015 at 3:12

Guruprasad J Rao · Accepted Answer · 2015-10-30 03:40:31Z

1

Just keep this in some js file which you commonly load for all the pages and also add an id to your ul, say nav here. Assuming your url will be of format - www.somedomain.com/filename.html

HTML

<ul class="nav navbar-nav" id="nav">

JS

(function() {
    var nav = document.getElementById('nav'),
        anchor = nav.getElementsByTagName('a'),
        current = window.location.pathname.split('/')[1];
        for (var i = 0; i < anchor.length; i++) {
        if(anchor[i].href == current) {
            anchor[i].parentNode.className = "active";
        }
    }
})();

Also with jquery as below:

$(function() {
  $('#nav a[href^="/' + location.pathname.split("/")[1] + '"]')closest('li').addClass('active');
});

answered Oct 30, 2015 at 3:40

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3495690 · Accepted Answer · 2015-10-30 03:19:52Z

1

I think what you're looking for is the jQuery .load event handler. It would probably be best to give the li an id, as well (for efficiency purposes):

<li id="home"><a href="index.html">Home</a></li>

Javascript:

$( "#partBeingLoaded" ).load(function() {
   $("#home").addClass("active");
});

answered Oct 30, 2015 at 3:19

user3495690

5761 gold badge4 silver badges15 bronze badges

Comments

Domain · Accepted Answer · 2015-10-30 05:41:29Z

<div class="collapse navbar-collapse navbar-right">
    <ul class="nav navbar-nav">
        <li class="active" id="index"><a href="index.html">Home</a></li>
        <li id="about-us"><a href="about-us.html">About Us</a></li>
        <li id="portfolio"><a href="portfolio.html">Portfolio</a></li>
        <li id="blog"><a href="blog.html">Blog</a></li> 
        <li id="contact-us"><a href="contact-us.html">Contact</a></li>                        
    </ul>
</div>

set ids for each li tag

var href = document.location.href;
var filename = href.substr(href.lastIndexOf('/') + 1);
var temp = filename.split(".");
$("#"+temp[0]).addClass("active");

and on load of page you can use that page name as id to make it active

Collectives™ on Stack Overflow

if statement for html/jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related