Make Twitter Bootstrap navbar link active

by

You need to ensure that you set the active class as part of the request response (as the page loads) and not before ie when the user clicks a link to request a different page.

First you need to determine which navlink should be set as active and then add the active class to the <li>. The code would look something like this

Tested by asker:

HTML within php file

Call a php function inline within the <li> markup passing in the links destination request uri

<ul class="nav">
    <li <?=echoActiveClassIfRequestMatches("home")?>>
        <a href="https://stackoverflow.com/questions/11813498/home.php">Search</a></li>
    <li <?=echoActiveClassIfRequestMatches("about")?>>
        <a href="about.php">About</a></li>
</ul>

PHP function

The php function simple needs to compare the passed in request uri and if it matches the current page being rendered output active class

<?php 

function echoActiveClassIfRequestMatches($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

    if ($current_file_name == $requestUri)
        echo 'class="active"';
}

?>

More Related Contents:

  1. Passing data via Modal Bootstrap and getting php variable?
  2. Pass PHP variable to bootstrap modal
  3. How to inject javascript code that uses php variables into php page
  4. How do I run ajax request in background continuously?
  5. AJAX request callback using jQuery
  6. Ajax Upload image
  7. How to get the jQuery $.ajax error response text?
  8. Send array with Ajax to PHP script
  9. PHP/Apache/AJAX – POST limit?
  10. HTML – Change\Update page contents without refreshing\reloading the page
  11. Ajax passing data to php script
  12. jQuery AJAX form using mail() PHP script sends email, but POST data from HTML form is undefined
  13. What does this mean in documentation: square bracket followed by comma ( [, ) [duplicate]
  14. Passing Javascript Variable to PHP using Ajax
  15. Ajax post request in laravel 5 return error 500 (Internal Server Error)
  16. Inserting into MySQL from PHP (jQuery/AJAX)
  17. Retrieve JSON POST data in CodeIgniter
  18. Executing PHP code inside a .js file
  19. Jquery ajax setTimeout after form succes not redirecting?
  20. HTTP OPTIONS request on Azure Websites fails due to CORS
  21. Removing array index reference when using json_encode()
  22. Ajax call with contentType: ‘application/json’ not working
  23. jQuery Ajax passing value on php same page
  24. Cross Domain Ajax Request with JQuery/PHP
  25. Push notifications from server to user with PHP/JavaScript
  26. When do I use PHP_EOL instead of \n and vice-versa ? Ajax/Jquery client problem
  27. Sending/Displaying a base64 encoded Image
  28. Ajaxify header cart items count in Woocommerce
  29. Jquery load() and PHP variables
  30. How to send the values of an array of checkboxes through Ajax using jQuery?

Leave a Comment