0

Twitter Bootstrap のnavbar componentを使用しています。メニュー項目のタグを強調表示するにはどうすればよいaですか? タグa全体ではなく、のみを強調表示するにはどうすればよいですか?li

以下は私のサンプル HTML です。

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
      <div class="container">
          <ul class="nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">Customers</a></li>
              <li><a href="#">support</a></li>
              <li><a href="#">Reports</a></li>
              <li><a href="#">Invoice</a></li>
          </ul>
      </div>
  </div>
</div>
4

2 に答える 2

1

のすべて の背景色を変更する必要がある場合は、CSS で次のようにします<a>。<li>

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

代わりに、jQuery を使用します。

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

これはあなたの質問に対する簡単な解決策になると思います。

于 2013-01-16T15:11:27.387 に答える
0

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:

CSS

.highlighted {
  background-color: yellow;
}

JavaScript

$(".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.

于 2013-01-16T14:45:14.113 に答える