Question

我正在使用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>

Answer 1

如果您需要更改<a>中每个 <li>的背景颜色，请在CSS中执行此操作：

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

相反，使用jQuery：

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

我想这可能是您问题的简单解决方案。

Answer 2

与jQuery *的大部分内容一样，有许多不同的方法可以实现这一点。这个问题可以分为两部分：

我们如何只选择要突出显示的元素？
列出项目如何将亮点应用于元素？

1。选择元素

对于第一部分，您可能希望选择具有特定文本的元素：

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

或者您可能更喜欢按位置选择元素：

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

让我们打破这个选择器。 .navbar将返回的对象限制为仅具有navbar类的元素内的事物。第二部分a进一步将这些对象过滤为a个元素。对于第一个选项，:contains()是content filter。它不是最快的过滤器之一，因此您需要将其与其他选择器结合使用（在本例中为$(".navbar a...）。第二个选项使用the :eq() filter。虽然我只是在这个答案中提出了这两个选择器选项，但请参阅我对jquery select nested div的回答，了解其他类似jQuery selectors的例子。

2。应用突出显示

现在我们有了我们想要的元素，让我们应用亮点。最简单的方法是强制执行css background-color属性：

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

我更喜欢的替代方法是创建一个具有预期样式的类（本例中为.highlighted），并使用jQuery的addClass()方法应用它：

CSS

.highlighted {
  background-color: yellow;
}

的JavaScript

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

前进

有关这些概念的实例，请参阅http://jsfiddle.net/jhfrench/eMk7N/。

* - 我正在使用jQuery来解决这个问题，因为Bootstrap是用jQuery构建的。

突出显示<a> alone in bootstrap navbar</a>

2 个答案:

1。选择元素

2。应用突出显示

前进