dimanche 1 février 2015

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




Aucun commentaire:

Enregistrer un commentaire