Solved

bootstrap nav - change active class

Posted on 2014-03-04
9
1,403 Views
Last Modified: 2014-03-15
I have a bootstrap nav on my page but I can't get the active class to change to the clicked page.  many google search results use:
$('.menu li a').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

Open in new window


This code is in the document.ready

but preventDefault stops the page from loading.  But if I leave that line out, the active tag goes back to the first nav item.  What am I doing wrong?

I have header.html which contains the includes and $document.ready()
I have menu.php which contains all of the nav li items
Then I have index.php and services.php which contain:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head>
    <?php require_once('lib/header.html') ?>
</head>

<body>
    <?php require_once('lib/menu.php') ?>

Open in new window

0
Comment
Question by:KCTechNet
  • 5
  • 4
9 Comments
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39902677
If the nav is loading a new page then your code is going to change the class on the page before the new page loads - which is pretty useless.

You need to change the class on page load - not on click.

Do you have a link we can look at?
0
 

Author Comment

by:KCTechNet
ID: 39904130
0
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39904373
Ok here is why what you are doing won't work.

You have a nav bar implemented as a <ul> with the <li> elements containing links to their respective pages.

You click services which is linked to services.php - this triggers a page request.

However, before the request is initiated you are running some jQuery to change the class on the selected menu item ... just before the page is wiped and a new page is loaded. In other words, overwriting the change you just made with the jQuery.

While jQuery can be used to solve this on page load - if you are generating your pages with php anyway then it makes sense to set the class to the menu directly. You have not provided any information on how you are generating the pages at the back so you will need to adapt this to your particular solution. The code below works on the assumption you have some common template into which specific page's are loaded.
<?php
require_once('top.php');
?>
Services content here
<?php
require_once('bottom.php');
?>

Open in new window

Or possibly like this
<!doctype html>
<html>
<head>
... head here
</head>
<body>
<ul>
   Nav here
</ul>
<?php
require_once('$page.php');
?>
<footer>
</footer>
</body>
</html>

Open in new window

Whatever method you are using it is assumed there is some means to identify what page you are on. For the sake of this exercise lets assume the page is stored in a global variable called $page. When drawing your links you do something like this
<ul>
  <li <?php echo ($page == 'home') ? 'class="active"' : '';?>><a href="services.php">Services</a></li>
  <li <?php echo ($page == 'services') ? 'class="active"' : '';?>><a href="services.php">Services</a></li>
  <li <?php echo ($page == 'maintenance') ? 'class="active"' : '';?>><a href="maintenance.php">Maintenance Programs</a></li>
...
</ul>

Open in new window

In other words assign the class based on the page called at the time the page is created.
0
 

Author Comment

by:KCTechNet
ID: 39905444
Your code worked perfect to add the active class.  Thank you.

In regards on how the page is built, I am using the first method you show.  But I am very interested in the second method you posted. It looks a lot cleaner, but I don't understand where you would assign a value to $page.  I know you have answered the original question, but can you explain where $page would be assigned prior to require_once('$page.php');
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:KCTechNet
ID: 39905465
and here's something odd...

Since I didn't need the jquery to add the class I removed the entire document.Ready() function.  When I did this, I noticed the page "flashes" when I switch between pages.  When I put the code back, the "flash" went away.  I then take out all the code within the document.ready function, so basically only leaving:

$(document).ready(function () {
    });

and the flashing stayed away.  what is going on there?
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39906592
Not sure about the flashing - is this not just the delay in retrieving the next page?
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39906594
In response to your other question about the method used - I just wrote an article - waiting for it to be approved - if it is I will post back here with a link.
0
 

Author Comment

by:KCTechNet
ID: 39908395
yeah, sorry, that's what i meant by flashing. it was the page loading.  but with the document.ready you don't see the loading like that.
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39914456
Here is a link to an article that gives a basic explanation of the templating approach you asked about earlier

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_13095-A-simple-PHP-master-Template-framework.html
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now