1

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

color: #00A1DB;

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

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

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

在过去的几个小时里，我已经破解了 CSS，但无法完全解决必要的更改以使其正常工作。如果有人能告诉我如何做到这一点，我真的很感激——我现在正在学习 CSS。

谢谢！

4

4 回答 4

2

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

比您需要在服务器端激活 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

于 2012-09-06T07:41:39.897 回答
1

看演示

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

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

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


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


    });​
于 2012-09-06T08:01:50.950 回答
0

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

重要组成部分：

改变

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

到

.sf-menu li.current a {
    color: #00A1DB ! important;
}
于 2012-09-06T07:21:29.100 回答
0

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

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

.current {
     background-color: #eee;
}
于 2012-09-06T07:22:32.187 回答