Reputation: 3751

How to swap css class depending on the page the user is on

<nav id="navMenu" class="navMenu">
    <ul>
        <li class="active homePage">
            <a href="index.php" title="Homepage">Home</a>
        </li>
        <li class="resourcesPage">
            <a href="resources.php" title="Resources">Resources</a>
            <ul>
                <li><a href="resources_restaurants.php"><span class="icon elem0"></span>Restaurants</a></li>
                <li><a href="resources_businesses.php"><span class="icon elem0"></span>Businesses</a></li>
                <li><a href="resources_events.php"><span class="icon elem0"></span>Events</a></li>
                <li><a href="resources_elearning.php"><span class="icon elem0"></span>e-Learning</a></li>
                <li><a href="resource_other.php"><span class="icon elem0"></span>Other</a></li>
            </ul>
        </li>
        <li class="spiPage">
            <a href="#">Spi</a>
            <ul>
                <li><a href="spi_qa.php"><span class="icon elem1"></span>Q&A</a></li>
                <li><a href="spi_knowledge.php"><span class="icon elem1"></span>Knowledge</a></li>
            </ul>
        </li>
        <li class="aboutPage">
            <a href="#">About Us</a>
        </li>
        <li class="contactPage">
            <a href="#">Contact Us</a>
        </li>
    </ul>
</nav>

How can I modify the below script so if any of the resources page is in the Url, the LI with the class resourcesPage will have the active class. Only one of the parent LI will have the active class.

$(function() {
    var pathName = getPageName(window.location.pathname);

    if (pathName.split("_").toLowerCase() == 1) { //if the path is anything related to the home page
        $("."+pathName+"Page").addClass("active"); //add the 'active' class to the homePage LI and remove it from the rest
    }
    else if (pathName.split("_").toLowerCase() == 1) { //if the path is anything related to the resources page
        $("."+pathName+"Page").addClass("active"); //add the 'active' class to the resourcePage LI and remove it from the rest
    }
    else if (pathName.split("_").toLowerCase() == 1) { //if the path is anything related to the spi page
        $("."+pathName+"Page").addClass("active"); //add the 'active' class to the spiPage LI and remove it from the rest
    }
    else if (pathName.split("_").toLowerCase() == 1) { //if the path is anything related to the about page
        $("."+pathName+"Page").addClass("active"); //add the 'active' class to the aboutPage LI and remove it from the rest
    }
    else if (pathName.split("_").toLowerCase() == 1) { //if the path is anything related to the contact page
        $("."+pathName+"Page").addClass("active"); //add the 'active' class to the contactPage LI and remove it from the rest
    }
});

UPDATE:

<nav id="navMenu" class="navMenu">
    <ul>
        <li class="active homePage" id="home">
            <a href="index.php" title="Nur4Nas Homepage">Home</a>
        </li>
        <li class="resourcesPage" id="resources">
            <a href="resources.php" title="Resources">Resources</a>
            <ul>
                <li id="resources_ins"><a href="resources_insurance.php"><span class="icon elem0"></span>Institutions</a></li>
                <li id="resources_restaurants"><a href="resources_restaurant.php"><span class="icon elem0"></span>Restaurants</a></li>
                <li id="resources_businesses"><a href="resources_businesses.php"><span class="icon elem0"></span>Businesses</a></li>
                <li id="resources_events"><a href="resources_events.php"><span class="icon elem0"></span>Events</a></li>
                <li id="resources_elearn"><a href="resources_elearn.php"><span class="icon elem0"></span>e-Learning</a></li>
                <li id="resources_other"><a href="resources_other.php"><span class="icon elem0"></span>Other</a></li>
            </ul>
        </li>
        <li class="spiPage" id="spi">
            <a href="spi.php" title="Spi">Spi</a>
            <ul>
                <li id="spi_qa"><a href="spi_qa.php"><span class="icon elem1"></span>Q&A</a></li>
                <li id="spi_knowledge"><a href="spi_knowledge.php"><span class="icon elem1"></span>Knowledge</a></li>
                <li id="spi_marriage"><a href="spi_family.php"><span class="icon elem1"></span>Family</a></li>
                <li id="spi_dwif"><a href="spi_inter.php"><span class="icon elem1"></span>Inter</a></li>
            </ul>
        </li>
        <li class="expressionPage" id="expression">
            <a href="expression.php" title="Expression">Expression</a>
            <ul>
                <li id="expression_multimedia"><a href="expression_multimedia.php"><span class="icon elem3"></span>Multimedia</a></li>
                <li id="expression_eduact"><a href="expression_eduact.php"><span class="icon elem3"></span>Education/Activity</a></li>
                <li id="expression_ouwo"><a href="expression_ouwo.php"><span class="icon elem3"></span>Our World</a></li>
                <li id="expression_poems"><a href="expression_poems.php"><span class="icon elem3"></span>Poems</a></li>
                <li id="expression_other"><a href="expression_other.php"><span class="icon elem3"></span>Other</a></li>
            </ul>
        </li>
        <li class="aboutPage" id="about">
            <a href="aboutus.php" title="About Us">About Us</a>
        </li>
        <li class="contactPage" id="contact">
            <a href="contactus.php" title="Contact Us">Contact Us</a>
        </li>
    </ul>
</nav>

So for example, in the code above, if I am on the homepage, the home LI ID will be set to active (as shown above). If I am on the resources or any of the sub resources page, the resources LI ID will be set to active class and all the other LI will remove the active class.

Upvotes: 0

Answers (3)

SearchForKnowledge

Reputation: 3751

This is what solved the issue for me:

<nav id="navMenu" class="navMenu">
        <ul>
            <li class="active homePage" id="home">
                <a href="index.php" title="Nur4Nas Homepage">Home</a>
            </li>
            <li class="resourcesPage" id="resources">
                <a href="resources.php" title="Resources">Resources</a>
                <ul>
                    <li id="resources_ins"><a href="resources_insurance.php"><span class="icon elem0"></span>Institutions</a></li>
                    <li id="resources_restaurants"><a href="resources_restaurant.php"><span class="icon elem0"></span>Restaurants</a></li>
                    <li id="resources_businesses"><a href="resources_businesses.php"><span class="icon elem0"></span>Businesses</a></li>
                    <li id="resources_events"><a href="resources_events.php"><span class="icon elem0"></span>Events</a></li>
                    <li id="resources_elearn"><a href="resources_elearn.php"><span class="icon elem0"></span>e-Learning</a></li>
                    <li id="resources_other"><a href="resources_other.php"><span class="icon elem0"></span>Other</a></li>
                </ul>
            </li>
            <li class="spiPage" id="spi">
                <a href="spi.php" title="Spi">Spi</a>
                <ul>
                    <li id="spi_qa"><a href="spi_qa.php"><span class="icon elem1"></span>Q&A</a></li>
                    <li id="spi_knowledge"><a href="spi_knowledge.php"><span class="icon elem1"></span>Knowledge</a></li>
                    <li id="spi_marriage"><a href="spi_family.php"><span class="icon elem1"></span>Family</a></li>
                    <li id="spi_dwif"><a href="spi_inter.php"><span class="icon elem1"></span>Inter</a></li>
                </ul>
            </li>
            <li class="expressionPage" id="expression">
                <a href="expression.php" title="Expression">Expression</a>
                <ul>
                    <li id="expression_multimedia"><a href="expression_multimedia.php"><span class="icon elem3"></span>Multimedia</a></li>
                    <li id="expression_eduact"><a href="expression_eduact.php"><span class="icon elem3"></span>Education/Activity</a></li>
                    <li id="expression_ouwo"><a href="expression_ouwo.php"><span class="icon elem3"></span>Our World</a></li>
                    <li id="expression_poems"><a href="expression_poems.php"><span class="icon elem3"></span>Poems</a></li>
                    <li id="expression_other"><a href="expression_other.php"><span class="icon elem3"></span>Other</a></li>
                </ul>
            </li>
            <li class="aboutPage" id="about">
                <a href="aboutus.php" title="About Us">About Us</a>
            </li>
            <li class="contactPage" id="contact">
                <a href="contactus.php" title="Contact Us">Contact Us</a>
            </li>
        </ul>
    </nav>

Script:

var pathName = getPageName(window.location.pathname);
var getSubPath = pathName.split("_")[0];

$('.ulHeaderMenu li').removeClass('active');
$('.ulHeaderMenu li.'+getSubPath+'Page').addClass('active');

Thanks to @lassombra for the pointer to have it working.

Upvotes: 0

bakriawad

Reputation: 345

you can also use PHP to do so in case the user has JS disabled:

<?php if(expression) $style = "active"; else $style="";

<div class="something <?php echo $style ?>" >
</div>

some people disable JS, some browsers don't have good JS functions, it is a good practice to make important stuff be server side.

Upvotes: 2

lassombra

Reputation: 427

A script that would do what you are looking for is essentially

$(function() {
  var pathName = window.location.pathname.split('/')[1];
  $('li[href='+pathName+']').addClass('active').parents('li').addClass('active');
});

This is generally considered bad design and non-performant but it will do exactly what I think you are trying to do.

The reason it will be non-performant is because you aren't using efficient selectors (you don't have id attributes directly derived from the page name for example so you can't map 1:1). These kind of jquery selectors traverse the entire DOM looking for matches, and as such can't get exactly what you want. In contrast, if you have an id which is just a parsed version of the page name, then you don't have to traverse the entire DOM, and you can use $('#'+idName) which will be very fast.

More information about jquery performance: http://24ways.org/2011/your-jquery-now-with-less-suck

EDIT: Added more about actually refactoring the original document:

Rewriting the original document with ids which are the pathnames without the .php gets you:

<nav id="navMenu" class="navMenu">
    <ul>
        <li class="active homePage" id="index">
            <a href="index.php" title="Homepage">Home</a>
        </li>
        <li class="resourcesPage" id="resources">
            <a href="resources.php" title="Resources">Resources</a>
            <ul>
                <li id="resources_restaurants"><a href="resources_restaurants.php"><span class="icon elem0"></span>Restaurants</a></li>
                <li id="resources_businesses"><a href="resources_businesses.php"><span class="icon elem0"></span>Businesses</a></li>
                <li id="resouces_events"><a href="resources_events.php"><span class="icon elem0"></span>Events</a></li>
                <li id="resouces_elearning"><a href="resources_elearning.php"><span class="icon elem0"></span>e-Learning</a></li>
                <li id="resouces_other><a href="resources_other.php"><span class="icon elem0"></span>Other</a></li>
            </ul>
        </li>
        <li class="spiPage">
            <a href="#">Spi</a>
            <ul>
                <li id="spi_qa"><a href="spi_qa.php"><span class="icon elem1"></span>Q&A</a></li>
                <li id="spi_knowledge"><a href="spi_knowledge.php"><span class="icon elem1"></span>Knowledge</a></li>
            </ul>
        </li>
        <li class="aboutPage">
            <a href="#">About Us</a>
        </li>
        <li class="contactPage">
            <a href="#">Contact Us</a>
        </li>
    </ul>
</nav>

With that you could rewrite your javascript to be:

$(function() {
  //This double split is an easy way to parse out just the filename portion
  //it equivalently means "id" in this case
  var pathName = window.location.pathname.split('/')[1].split('.')[0];
  //find limits results to only li tags, it is a safety method which can be
  //ignored if you're confident in your html structure
  $('#'+pathName).find('li').addClass('active').parents('li').addClass('active');
});

Upvotes: 2

How to swap css class depending on the page the user is on

Answers (3)

Related Questions