Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

how to give active state

this is a code i have done, by bootstrap

<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <!-- code snippet for dropdown for mobile view--> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- end of code of code snippet for mobile view--> <a class="navbar-brand text-muted glyphicon glyphicon-home" href="index.php"> Home </a>

        <ul class="nav navbar-nav navbar-right ">

          <li><a href="ourvision.php" class="selected">Our Vision</a></li> 

          <li><a href="bags.php">Products</a></li>

          <li><a href="contact.php">contact</a></li>

        </ul>



      </div>
  </div>
</div>

now i want to selected for e.g: products and when i select the page and the page should be highlighted ( means i should know that this products page is opened )

please tell me this, how to fix the issue

1 Answer

Joshua Briley
PLUS
Joshua Briley
Courses Plus Student 24,645 Points

Although there are infinite ways of accomplishing this task, I usually turn to CGI variables to help with this.

For example, I'll set up a standalone php file and call it config.php...

<?php
// Set Base Path by getting the CGI script_name variable
$bodyID = $_SERVER["SCRIPT_NAME"];

// Remove the .php extension from the script_name variable, and set it to $file variable
$file = basename($bodyID, ".php");

// Adds class to nav items when you're on a given page
function nav_function($body_id) {
  // change scope of file so it can be used inside this function.
  global $file;
  // if the body_id and the script_name are the same, then print 'class="selected"
  if($file == $body_id) {
    print 'class="selected"';
  }
}
?>

Then, I'd include config.php before the head of my document:

<?php include('config.php'); ?>
<!doctype html>
<html>
<head>
  ...
</head>
<body id="<?php print $file; ?>">
  <ul class="nav navbar-nav navbar-right ">
    <li><a href="ourvision.php" <?php nav_function(ourvision); ?>>Our Vision</a></li> 
    <li><a href="bags.php" <?php nav_function(bags); ?>>Products</a></li>
    <li><a href="contact.php" <?php nav_function(contact); ?>>contact</a></li>
   </ul>
...
</html>

Here's a php quick start repo that I posted several months ago... Please feel free to download and tweak it as you find necessary.