Solved

bootstrap nav - change active class

Posted on 2014-03-04
9
1,385 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 51

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 51

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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 51

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 51

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 51

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn how to dynamically set the form action using jQuery.
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…

707 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

15 Experts available now in Live!

Get 1:1 Help Now