Skip to main content
My Winter Guitar
Known Participant
April 12, 2017
Answered

SSI and class="active"

How do I add class="active" to pages on a site using SSI?

    This topic is closed to new replies. Start a new post to keep the conversation going.
    osgood_Correct answer
    Legend
    April 13, 2017

    https://forums.adobe.com/people/Nancy+OShea  wrote

    This is super easy to do with jQuery.

    Assign "active" class to navbar item based on current page URL with jQuery · GitHub

    Are you sure the code at that link still works, its 4 years old?

    I've tried it every which way and can't get it to work.

    I found another  jquery solution that does work in a similar fashion but is flawed in the workflow, so Im just trying to test the one at the link you provided to see if it functions any differently.

    Anyway it seems they may probably work the same finding the file 'path' name which means you have to keep updating the path between local development and remote development:

    <li><a href="http://localhost/editor_test/page_marker/home.php">Home</a></li>

    <li><a href="http://www.yourDomainName.co.uk/editor_test/page_marker/home.php">Home</a></li>

    I dont know if jQuery can just find the file name and compare that rather than the path, which would make the workflow more streamlined.

    EDITED.

    Apparently you can pull the file name

    var current = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

    So you'd really be wanting to compare the file name and NOT the pathname.

    Example:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8" />

    <title>Page Marker</title>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script>

    $(function(){

    var current = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

    $('.nav 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.addClass('active');

    }

    })

    })

    </script>

    <style>

    .active {

    background-color: yellow;

    }

    </style>

    </head>

    <body>

    <ul class="nav">

    <li><a href="home.php">Home</a></li>

    <li><a href="about.php">About</a></li>

    </ul>

    </body>

    </html>

    View reply

    22 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 12, 2017

    This is super easy to do with jQuery.

    Assign "active" class to navbar item based on current page URL with jQuery · GitHub

    Translate
    Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    April 12, 2017

    As Nancy has pointed out, just compare the URL with the link of the menu item. Works all the time. Make sure that you do have an active class for the index page because the URL for that page is usually blank

    Translate
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    osgood_
    Legend
    April 12, 2017

    https://forums.adobe.com/people/Digital+Ink+LLC  wrote

    How do I add class="active" to pages on a site using SSI?

    If you can support php:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8" />

    <title>Page Marker</title>

    <style>

    .active a {

    background-color: yellow;

    }

    </style>

    </head>

    <body>

    <?php $page = basename($_SERVER['PHP_SELF']); ?>

    <ul>

    <li <?php if($page == "home.php") { echo "class='active'"; } ?>  ><a href="home.php">Home</a></li>

    <li <?php if($page == "about_us.php") { echo "class='active'"; } ?>><a href="about_us.php">About Us</a></li>

    <li <?php if($page == "products.php") { echo "class='active'"; } ?>><a href="products.php">Products</a></li>

    </ul>

    </body>

    </html>

    Translate
    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    April 12, 2017

    Are you trying to create a "you are here" style link indicator for a menu in a server side include?

    One way to do that would be to give each link in your menu a class that matches the link's page, something like .portfolio, .about, .contact, etc then duplicate that class in the body tag of the individual pages.

    You would then create an "active" class using a selector like...

    body.contact .contact, body.portfolio .portfolio, body.about .about {
    your active class properties here

    }

    That way the "you are here" style link will be active only on a page when the link and <body> have the same class. The only "page specific" code would be in the <body> allowing you to keep the menu in an SSI.

    Translate
    Rob Hecker2
    Rob Hecker2
    Legend
    April 12, 2017

    This could be done with PHP and probably javascript as well.

    if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') {
    echo "

    <style>

    .active { background-color:red;  }

    </style>

    ";
    }

    Explanation: you can apply the class 'active' globally, but it will only make the background red if the page is accessed via SSL.

    Translate
    pziecina
    pziecina
    Legend
    April 12, 2017

    I am not certain what you are trying to do.

    To add the class using an ssi, you would have to add the ssi 'link' to every instance that you wish it to apply too. Which is probably what you are trying to avoid doing using just html code.

    Translate
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices