Jump to content

active page inc. class


brown2005

Recommended Posts

what i mean is at the start the menu will be...

 

<ul>

<li class='active'>Home<li>

<li>Page1<li>

<li>Page2<li>

</ul>

 

if i click on page1 then it will be

 

<ul>

<li>Home<li>

<li class='active'>Page1<li>

<li>Page2<li>

</ul>

 

and so on....

 

what I want to know is;

 

what can I do to automatically remove the class from one page and put it onto another, when the page is selected.

Put id on that <li> tags and then use Java Script to put the "active" class on your selected link.

 

For the java script part:

document.getelementbyid(id_changed).className = newClass;

document.getelementbyid(id_previous).className = ""; // or some other class

 

Also another option is if You reload the page do that with php.

 

Here is the concept in pure PHP. Please try this.

 

commonInclude.php

<?php
/**
* commonInclude.php
*/
// List of pages
$pageArray = array(
     'home', 'page1', 'page2',
);

function getLink($pageIndex = 0) {
   global $pageArray;
   $returnLinks = array();

   // Print the starting UL
   print '<ul>';

   // If the pageIndex passed to the function does not exist in $pageArray, take the home as default
   if ( !isset($pageArray[$pageIndex]) ) {
      $default = 0;
   }
   // Else, default is the pageName passed in this function
   else {
      $default = $pageIndex;
   }
   
   // Construct all the LI tags here
   for($index = 0, $count = sizeof($pageArray); $index < $count; $index++) {
       if ( $index == $default ) {
           print '<li class="active">' . $pageArray[$index] . '</li>';
       }
       else {
           print '<li>' . $pageArray[$index] . '</li>';
       }
   }

   // Print the closing UL
   print '</ul>';
}
?>

 

home.php

<?php
include_once('commonInclude.php');

// The menu section
getLink(0);
?>

 

page1.php

<?php
include_once('commonInclude.php');

// The menu section
getLink(1);
?>

 

And so on....

 

Does it make sense?

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.