Take the 2-minute tour ×

I am using Twitter Bootstrap's navbar component. How can I highlight an a tag of a menu item--but just the a, not the whole li tag?

The following is my sample HTML:

  <div class="navbar-inner">
      <div class="container">
          <ul class="nav">
              <li><a href="#">Customers</a></li>
              <li><a href="#">support</a></li>
              <li><a href="#">Reports</a></li>
              <li><a href="#">Invoice</a></li>
share|improve this question
What do you mean by "highlight"? Give it a different background color? –  Jeromy French Jan 8 '13 at 17:54
ya giving a different background colour –  suriya Jan 16 '13 at 11:48
What does that question has to do with which framework was used for setup? This is basic CSS. Why is this tagged with jQuery? –  feeela Jan 16 '13 at 15:12
@feeela: that's my "fault". suriya's original question (stackoverflow.com/revisions/14117837/1) was tagged only as 'twitter-bootstrap', I added the JS and jQuery tags because I interpreted the question to mean highlighting an element based on an event. I'll keep an eye on the q and if I'm wrong about that I'll retag...no harm meant. –  Jeromy French Jan 16 '13 at 15:32
add comment

2 Answers

If you need to change the background color of every <a> in your <li>, in CSS you could do this:

.nav li > a {
  background-color: #ff0000;

instead, with jQuery:

$('.nav li > a').css('background-color', '#ff0000');

I guess this could be a simple solution to your question.

share|improve this answer
add comment

As in most things with jQuery*, there are many different ways to accomplish this. This question can be broken down into two parts:

  1. how do we select only the element that we want to highlight?
  2. List item how do we apply a highlight to the element?

1. Select the element

For the first part, you may want to select the element that has a certain text:

$(".navbar a:contains('Home')")

Or you may prefer to select the element by position:

$(".navbar a:eq(2)")

Let's break this selector down. The .navbar limits the returned objects to only the things within element(s) having the navbar class. The second part, a, further filters those objects to only the a elements. For the first option, :contains() is a content filter. It's not one of the fastest filters, so you'll want to use it in conjunction with other selectors (in this case $(".navbar a...). The second option uses the :eq() filter. Though I'm only proposing these two selector options in this answer, see my answer to jquery select nested div for examples of other similar jQuery selectors.

2. Apply the highlight

Now that we have the element we want, let's apply the highlight. The most straightforward way to do so would be to just brute-force the css background-color property:

$(".navbar a:contains('Home')").css('background-color', 'orange');

An alternative that I prefer is to create a class with the intended styling (.highlighted for this example), and apply it using jQuery's addClass() method:


.highlighted {
  background-color: yellow;


$(".navbar a:contains('Home')").addClass('highlighted');

Go forth

See http://jsfiddle.net/jhfrench/eMk7N/ for a working example of these concepts.

*-I'm using jQuery to solve this because Bootstrap is built with jQuery.

share|improve this answer
Setting background colors is achieved by using CSS. Involving JavaScript and especially jQuery is way to bloated for such a simple task. And even the Twitter Bootstrap uses plain CSS files to style the contents. –  feeela Jan 16 '13 at 15:15
@feela: You can probably guess from my answer that I know how to use CSS to apply styling directly. My answer presumes that suriya's intent will be to highlight a specific menu item based on some event--in which case neither JavaScript or jQuery is "bloat". If I'm wrong, then suriya will happily choose an alternate answer. –  Jeromy French Jan 16 '13 at 15:25
But there is not a word on JS or events in the question. Your answer is nice, but it hasn't much to do with the question. –  feeela Jan 16 '13 at 16:18
The brevity of the question leaves it open to interpretation. If I'm right about what suriya is trying to do than I like my answer. –  Jeromy French Jan 16 '13 at 16:26
add comment

Your Answer


