Reputation: 4622
I have a simple web page navigation bar which is working well. Now I want to style it so that the current page navigation link is a different colour. In this case I want to make the current page navigation link use this colour:
color: #00A1DB;
I've setup a simplified jsFiddle which shows what I currently have:
http://jsfiddle.net/fmdataweb/BEmXZ/
I've added a class of "current" to the Contacts link to represent that this is the current page. Now I need to modify the CSS so that it changes the colour of the "Contacts" link in the navigation bar to the specified colour.
I've hacked the CSS for the past few hours but can't quite work out the necessary changes to make to get this working. Really appreciate it if someone can show me how to make this happen - learning CSS as I go at the moment.
Thanks!
Upvotes: 1
Views: 4459
Reputation: 28588
Set the styles for class active and hover:
Than you need to make the li active, on the server side. So when you are drawing the menu, you should know which page is loaded and set it to:
<li class="active">Question</li>
<li>Tags</li>
<li>Users</li>
But if you are changing the content without reloading, you cannot change set the active li element on the server, you need to use 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>
Here is JSFiddle
Upvotes: 2
Reputation: 7006
You can use the jquery .addClass()
method to add your current
class to the clicked li
element and then remove the current
class using .removeClass
method for all the other li
elements.
$('#nav ul li').on("click",function(){
$(this).addClass('current');
var siblings =($(this).siblings());
siblings.each(function (index)
{
$(this).removeClass('current');
});
});
Upvotes: 1
Reputation: 1261
You can easily achieve this by assigning a class to your 'current' button when it is clicked.
You can style the class through CSS like this:
.current {
background-color: #eee;
}
Upvotes: 0
Reputation: 10090
Is this what you want? http://jsfiddle.net/BEmXZ/2/
Essential part:
change
.sf-menu li.current {
color: #00A1DB;
}
to
.sf-menu li.current a {
color: #00A1DB ! important;
}
Upvotes: 0