Question

我有一个简单的网页导航栏，效果很好。现在我想要设置它的样式，以便当前页面导航链接是不同的颜色。在这种情况下，我想让当前页面导航链接使用这种颜色：

color: #00A1DB;

我已经设置了一个简化的jsFiddle，它显示了我目前拥有的内容：

http://jsfiddle.net/fmdataweb/BEmXZ/

我在“联系人”链接中添加了一类“当前”，表示这是当前页面。现在我需要修改CSS，以便它将导航栏中“Contacts”链接的颜色更改为指定的颜色。

我在过去几个小时内攻击过CSS但是无法完成必要的更改以使其工作。真的很感激，如果有人能告诉我如何实现这一点 - 我现在就学习CSS。

谢谢！

Answer 1

设置类活动和悬停的样式：

您需要在服务器端激活li。因此，在绘制菜单时，您应该知道加载了哪个页面并将其设置为：

 <li class="active">Question</li>
 <li>Tags</li>
 <li>Users</li>

但是如果你在没有重新加载的情况下更改内容，你就无法在服务器上更改设置活动的li元素，你需要使用javascript：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
  .menu{width: 300px; height: 25; font-size: 18px;}
  .menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
  .menu li:hover, .menu li.active {
        background-color: #f90;
    }
</style>
</head>
<body>

<ul class="menu">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

<script type="text/javascript">

var make_button_active = function()
{
  //Get item siblings
  var siblings =($(this).siblings());

  //Remove active class on all buttons
  siblings.each(function (index)
    {
      $(this).removeClass('active');
    }
  )


  //Add the clicked button class
  $(this).addClass('active');
}

//Attach events to menu
$(document).ready(
  function()
  {
    $(".menu li").click(make_button_active);
  }  
)

</script>
</body>

</html>

这是JSFiddle

Answer 2

<强> See Demo

您可以使用jquery .addClass()方法将current类添加到点击的li元素中，然后使用current方法删除.removeClass类所有其他li元素。

$('#nav ul li').on("click",function(){

  $(this).addClass('current');
var siblings =($(this).siblings());


  siblings.each(function (index)
    {
      $(this).removeClass('current');
    });


    });

Answer 3

这是你想要的吗？ http://jsfiddle.net/BEmXZ/2/

基本部分：

变化

.sf-menu li.current {
    color: #00A1DB;
}

到

.sf-menu li.current a {
    color: #00A1DB ! important;
}

Answer 4

您可以通过在单击时为“当前”按钮指定一个类来轻松实现此目的。

您可以通过CSS设置类的样式：

.current {
     background-color: #eee;
}

突出显示当前导航链接

4 个答案: