0

我正在使用 Twitter Bootstrap 的导航栏组件。如何突出显示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

如果您需要更改每一个 <a>的背景颜色，在 CSS 中，您<li>可以这样做：

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

相反，使用 jQuery：

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

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

于 2013-01-16T15:11:27.387 回答
0

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

  1. 我们如何只选择我们想要突出显示的元素？
  2. 列表项我们如何对元素应用高亮？

1.选择元素

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

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

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

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

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

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 构建的。

于 2013-01-16T14:45:14.113 回答