Instead of trying to edit the CSS directly, just add a class like
(.active) to the link's <a> tag.
First off, get rid of your menulink# system. Targeting an ID with
sub-classes is much easier to apply changes to since you can abstract
the logic for each item with fewer instructions.
<ul id="nav">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul id="miscNav">
<li><a class="active" href="#">I'm not important</a></li>
<li><a href="#">Test Link 1</a></li>
<li><a href="#">Test Link 2</a></li>
</ul>
You can then style your .Active class accordingly and just have a
generic fall back styling for your #nav links.
Secondly, direct CSS modifications through javascript aren't necessary
when you can simply add/take away classes:
$(document).ready(function() {
var navItem = $("#nav a"); // assign your selector to a variable
navItem.click(function(){
// remove initial active state from all possible menu items
navItem.removeClass("active");
// add active state to clicked menu item and prevent default
link behaviour
$(this).addClass("active").preventDefault();
});
})(); // make our document.ready a self-invoking function
What this does is it removes the .active class from ALL list items
within #nav and then adds the .active class to the specific item that
fired the .click() event. Chaining .preventDefault() to the end of our
($this) selector is a much cleaner method for removing the default link
behaviour VS return false [s1].
Hope this helps a bit.
- Brandtley McMinn
Creative Director
Gigglebox Studios
giggleboxstudios.net
PS:
(
s1 - sited from Sitepoint's "jQuery: Novice to Ninja" which is a book I
highly recommend for learning the in's and out's of jQuery. link --
http://www.sitepoint.com/books/jquery1/
)
On 1/23/2011 4:12 PM, Kevin wrote:
Just tried with
document.getElementById("menulink1").style.color="#999";
document.getElementById("menulink2").style.color="#999";
document.getElementById("menulink3").style.color="#900";
Doesn't seem to make a difference.
On Jan 23, 2:02 pm, Kevin<k30...@gmail.com> wrote:
Hi, I have some menu links that have a hover color property.
I recently added some color changes on click through JQuery to
represent the current active page with
$("#menulink1").click(function(){
$('#menulink1').css("color","#000");
$('#menulink2').css("color","#555");
$('#menulink3').css("color","#555");
return false;});
$("#menulink2").click(function(){
$('#menulink1').css("color","#555");
$('#menulink2').css("color","#000");
$('#menulink3').css("color","#555");
return false;});
$("#menulink3").click(function(){
$('#menulink1').css("color","#555");
$('#menulink2').css("color","#555");
$('#menulink3').css("color","#000");
return false;
});
As soon as one of these functions are activated, however, the css
hover property seems to just stop working and it doesn't look like I
can edit the css hover property through JQuery.
I've tried .hover() but unless I indicate a color on mouseout, the
hover color just gets stuck and if I do indicate a mouseout color,
than the code above just gets ignored.
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: css-design@googlegroups.com
To unsubscribe: css-design-unsubscr...@googlegroups.com
