That worked great, thanks.
But now if I want the links to actually do something with a
conditional statement, how do I extract the text from "this"?
something like "if (this.html()=="text)"?
On Jan 23, 5:07 pm, Brandtley McMinn <bmcminn...@gmail.com> wrote:
> 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
