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?

Are you explicitly defining the $var_page_name or is this generated using a function that gets the actual page name? — SSH This
– SSH This, Commented Feb 15, 2012 at 17:03

Paul · Accepted Answer · 2012-02-15 17:10:21Z

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.

answered Feb 15, 2012 at 17:10

Paul

142k28 gold badges285 silver badges272 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin. · Accepted Answer · 2012-02-15 17:07:23Z

0

<?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

edited Feb 15, 2012 at 17:07

answered Feb 15, 2012 at 17:01

Martin.

10.5k3 gold badges45 silver badges69 bronze badges

Comments

ramayac · Accepted Answer · 2012-02-15 17:12:33Z

0

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.

answered Feb 15, 2012 at 17:12

ramayac

5,22310 gold badges53 silver badges59 bronze badges

Collectives™ on Stack Overflow

PHP Page name variable + jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related