我有一个简单的网页导航栏,效果很好。现在我想要设置它的样式,以便当前页面导航链接是不同的颜色。在这种情况下,我想让当前页面导航链接使用这种颜色:
color: #00A1DB;
我已经设置了一个简化的jsFiddle,它显示了我目前拥有的内容:
http://jsfiddle.net/fmdataweb/BEmXZ/
我在“联系人”链接中添加了一类“当前”,表示这是当前页面。现在我需要修改CSS,以便它将导航栏中“Contacts”链接的颜色更改为指定的颜色。
我在过去几个小时内攻击过CSS但是无法完成必要的更改以使其工作。真的很感激,如果有人能告诉我如何实现这一点 - 我现在就学习CSS。
谢谢!
答案 0 :(得分: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
答案 1 :(得分:1)
<强> 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');
});
});
答案 2 :(得分:0)
基本部分:
变化
.sf-menu li.current {
color: #00A1DB;
}
到
.sf-menu li.current a {
color: #00A1DB ! important;
}
答案 3 :(得分:0)
您可以通过在单击时为“当前”按钮指定一个类来轻松实现此目的。
您可以通过CSS设置类的样式:
.current {
background-color: #eee;
}