Hey Kevin,
So one way to conditionally run a script based on the value of the link
is to do this:
<!-- HTML -->
<ul id="nav">
<li><a id="home" class="active" href="#">Home</a></li>
<li><a id="about" href="#">About</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
// JAVASCRIPT
jQuery(document).ready(function() {
var navItem = $("#nav a");
navItem.click(function(){
// remove initial active state
navItem.removeClass("active");
// <<< START NEW CODE!!!!
// retrieve the id value 'this' <a> tag
var navItemValue = $(this).attr('id');
if ( navItemValue === "home") {
alert("We are home");
}
else if ( navItemValue === "about") {
alert("Pancakes are DELICIOUS!");
}
else if ( navItemValue === "contact") {
alert("Something else is gonna happen if you press ok...
not really :P");
}
// END NEW CODE >>>
// add active state to pressed menu item
$(this).addClass("active").preventDefault();
});
})();
So using the same script we had last time, we just add another variable
assignment and then our if-else logic. We're taking the current link
element's id# attribute using $(this).attr() and assigning that to val
navItemValue.
This is the jQuery documention on the .attr() method --
http://api.jquery.com/attr/
By assigning 'this' id to a value, we can use that variable to create
our logic. So if the id of home is "home", run this script.
You can also run plugin function calls given your if statement evaluates
properly.
So say you had a modal window popup for a form submission.
if ( navItemVal === "correct_variable") {
jqPopupWindow();
}
but you can stuff any logic you wish within the respective 'if' statement.
- Brandtley
On 1/23/2011 10:15 PM, Kevin wrote:
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/
)
--
--
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
