Using JQuery to apply a CSS class to a designated webpage

Question

Using JQuery to apply a CSS class to a designated webpage

In an effort to achieve a responsive design, I am seeking to add an active class to an unordered list item based on the specific page that the user is viewing. Essentially, I want to implement conditional formatting using jQuery while learning on MAMP.

Currently, I am following a slow method...

HTML

<nav id="main-site-nav" class="main-menu">
 <ul>
  <li><a href="index.php" class="crnt-page">Home</a></li>
  <li><a href="/services.php">Services</a></li>
  <li><a href="/certification.php" >Certification</a></li>
  <li><a href="/customers.php">Customers</a></li>
  <li><a href="/contact-me.php">Contact Me</a></li>
 </ul>
</nav>

CSS

#main-site-nav .crnt-page {
 color: #E8A317;
 text-decoration:none;
}

I currently have to manually add the class for each list item. My goal is to streamline this process by implementing it in my main.js file at the bottom of the page. Any assistance would be greatly appreciated.

UPDATE!

This PHP solution worked well. However, I am considering migrating it to Wordpress.

<nav id="main-site-nav" class="main-menu">
  <ul>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="crnt-page"';?>href="index.php">Home</a></li>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'services.php')) echo 'class="crnt-page"';?>href="/services.php">Services</a></li>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'certification.php')) echo 'class="crnt-page"';?>href="/certification.php">Certification</a></li>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'customers.php')) echo 'class="crnt-page"';?>href="/customers.php">Customers</a></li>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact-me.php')) echo 'class="crnt-page"';?>href="/contact-me.php">Contact Me</a></li>
  </ul>
</nav>

Appreciate the prompt responses! Now I just need to familiarize myself with the pre-formatted code option in Stack Overflow :)

jquery html css

Answer 1

Answer №1

If you want to achieve this with PHP, here's an example:

Check out the PHP code snippet below:

<nav id="main-site-nav" class="main-menu">
 <ul>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'index.php') echo 'class="crnt-page"'; ?>><a href="index.php" class="crnt-page">Home</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'services.php') echo 'class="crnt-page"'; ?>><a href="/services.php">Services</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'certification.php') echo 'class="crnt-page"'; ?>><a href="/certification.php" >Certification</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'customers.php') echo 'class="crnt-page"'; ?>><a href="/customers.php">Customers</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'contact-me.php') echo 'class="crnt-page"'; ?>><a href="/contact-me.php">Contact Me</a></li>
 </ul>
</nav>

Answer 2

If you want to achieve this with PHP, here's an example:

Check out the PHP code snippet below:

<nav id="main-site-nav" class="main-menu">
 <ul>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'index.php') echo 'class="crnt-page"'; ?>><a href="index.php" class="crnt-page">Home</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'services.php') echo 'class="crnt-page"'; ?>><a href="/services.php">Services</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'certification.php') echo 'class="crnt-page"'; ?>><a href="/certification.php" >Certification</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'customers.php') echo 'class="crnt-page"'; ?>><a href="/customers.php">Customers</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'contact-me.php') echo 'class="crnt-page"'; ?>><a href="/contact-me.php">Contact Me</a></li>
 </ul>
</nav>

Answer 3

Answer №2

Consider implementing something like the code snippet below (although not verified):

var currentURL = document.location.href.split('/').pop().toLowerCase();

$('#main-navigation a').filter(
    function(){
        return currentURL == this.href.split('/').pop().toLowerCase();
    }).addClass('current-page');

However, it may be more efficient to handle this on the server-side (during page generation).

Additional Resources:

Answer 4

Consider implementing something like the code snippet below (although not verified):

var currentURL = document.location.href.split('/').pop().toLowerCase();

$('#main-navigation a').filter(
    function(){
        return currentURL == this.href.split('/').pop().toLowerCase();
    }).addClass('current-page');

However, it may be more efficient to handle this on the server-side (during page generation).

Additional Resources:

Answer 5

Answer №3

To quickly customize each page, consider assigning a class to the body tag on every page like so:

<body class="page-services">

Next, add specific classes to either list items or anchor tags as shown below:

<li class="page-services"><a href="..."></a></li>
<li class="page-certification"><a href="..."></a></li>

In your script, you can simply write:

$(document).ready(function() {
    var currentClass = $("body").attr("class");
    $("li."+currentClass).find("a").addClass("current-page");
});

There are various approaches to achieving this outcome, so feel free to explore other methods depending on your existing class structure.

Answer 6

To quickly customize each page, consider assigning a class to the body tag on every page like so:

<body class="page-services">

Next, add specific classes to either list items or anchor tags as shown below:

<li class="page-services"><a href="..."></a></li>
<li class="page-certification"><a href="..."></a></li>

In your script, you can simply write:

$(document).ready(function() {
    var currentClass = $("body").attr("class");
    $("li."+currentClass).find("a").addClass("current-page");
});

There are various approaches to achieving this outcome, so feel free to explore other methods depending on your existing class structure.

Answer 7

Answer №4

Here is a solution that has been effective for me:

<style>.blue {background-color: blue;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</head>
<body>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>

<script type="text/javascript>
  var page = /\/([^\/]+)$/.exec(document.location.href)[1];
  $('a[href="' + page + '"]').addClass('blue');
</script>

Answer 8

Here is a solution that has been effective for me:

<style>.blue {background-color: blue;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</head>
<body>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>

<script type="text/javascript>
  var page = /\/([^\/]+)$/.exec(document.location.href)[1];
  $('a[href="' + page + '"]').addClass('blue');
</script>

Using JQuery to apply a CSS class to a designated webpage

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

JavaScript form validation ensures that the data entered into a

Hide div element based on its identifier

What is the best way to retrieve data from multi-dimensional JSON structures?

a solution to the focus/blur issue in Firefox's browser bug

How do you retrieve the font-size value in percentages using jQuery's `css()` method for the element `e`?

Designing a uniquely shaped button

Activate the zoom feature in jquery mobile

What is the purpose of applying the two unique class names (root and disabled) to the DOM in order for it to function correctly?

Tips on revealing div elements using a slide-down animation exclusively with JavaScript

Launching Links in Browser Using Cordova in Android Platform

Exploring hierarchical information within a JSON response from a Wiki API

Is it possible to fill dropdown menus on a webpage using jQuery or JavaScript without the need for an ajax call?

Uploading files using C# and data streaming

Transfer a variable from one PHP page to another and navigate between the two pages

Can @keyframes percentage be determined using a CSS variable?

transform ajax data into an array structure

Create a layout of div elements aligned to the right, utilizing a parent container div that automatically adjusts its size to fit the

Looking for a solution to dynamically fill a list in JQuery with data from a JSON file. Any suggestions for troubleshooting?

Leveraging Excel VBA to manipulate the selection in a dropdown menu on a webpage

Align text vertically in a responsive absolutely-positioned div using CSS