PHP Page name variable + jQuery

Question

I'm having a problem, after implementing a jQuery in-page tab navigation system, with how to redefine my page names, so that they can be styled as "active" in my main navigation.

I use:

<?php $var_page_name = 'example.php'; ?> 

to define each page name on my web site, with example replaced with the correct page name.

I then use the following to style the "active" page in the navigation, with the active class defined using CSS:

<?php global $var_page_name; ?>
<ul>
<li><a<? if($var_page_name == 'index.php') print ' class="active"'; ?> href="index.php">web design</a></li>
</ul>

Works great. I've added an in-page jQuery tabbing solution for navigation. Which also works.

However, after clicking on one of the tabs and going to the new content div, its seems that the page name changes, so the correct main navigation item is no longer considered active. The url reads as http://www.example.com/index.php# , but if I modify my active page navigation variable to read:

<a<? if($var_page_name == 'index.php' || $var_page_name == 'index.php#' ) print ' class="active"'; ?>

or try the div id that is being used by the tabs:

<a<? if($var_page_name == 'index.php' || $var_page_name == 'index.php#content_2' ) print ' class="active"'; ?>

it doesn't fix the problem. Any suggestions?

Answer 1

It's a bug in your tabs script.

When you click a tab it removes the "active" class from your <a> in your top nav even though that <a> is not a tab.

Change the line:

// switch all tabs off
$(".active").removeClass("active");

to:

$(".tabs .active").removeClass("active");

or something similar to that which only removes the class 'active' from your tabs instead of all elements in your page.

Answer 2

<?php $var_page_name = 'example.php'; ?>

that's wrong. Use something like

<?php
$exploded = explode($_SERVER['REQUEST_URI']);
<a href="/page/" class="<?php echo ($exploded[1] == "page") ? "active" : ""; ?>">Page</a>

Keep in mind that hash isn't being sent to the server by default

Answer 3

Well, I think the problem is more related with the jquery code in the page, than the PHP code. Checking the js header code, I found this:

// When a link is clicked       
$("a.tab").click(function () {                              
  // switch all tabs off            
  $(".active").removeClass("active");
  ...
});

The click binding on the selector "a.tab" is clearing all ".active" classes in the whole page, including the ones in the "nav" section (wich is above the tab).
Try changin this line:

$(".active").removeClass("active");

To this:

$("#tabbed_box_1").find(".active").removeClass("active");

That should do it.