just starting to get my hands dirty with the jQuery goodness and the first task i'm trying to tackle is to underline a link after it has been cl开发者_运维技巧icked. Naturally, after a different link in the same div was clicked the previous one is no longer underlined...
Regards
So basically, you are wanting a kind of navigation menu that changes the style of the link once clicked. First, make a style that just underlines:
<style type="text/css">
a.currentlyActive
{
text-decoration: underline;
}
</style>
The code you will be modifying is...
<a class="navigation" href="#">My First Link</a>
<a class="navigation" href="#">My Second Link</a>
<a class="navigation" href="#">My Third Link</a>
Just a few links with some type of class that denotes that it is the links u want to underline and not underline.
Next, add a little jQuery magic to apply the style upon clicking. And at the same time, you will want to remove the style from all others.
<script type="text/javascript">
$(function() {
$('.navigation').click(function() {
// this removes the underline class from all other ".navigation" links.
$('.navigation').removeClass('currentlyActive');
// this makes the one that was clicked underlined
$(this).addClass('currentlyActive');
});
});
</script>
And, that's it. I tried to as verbose as possible to explain what each step does. Obviously, you can makes the class names shorter and remove the comments to make it small and lean.
$("a").click(function() {
var $this = $(this);
$this.closest("div").find("a").removeClass("underlined");
$this.addClass("underlined");
});
Then, of course, you need to have a class called "underlined", that underlines the links.
here is a cleaner version:
<style type="text/css">
.underline { border-bottom:1px solid #000; }
</style>
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('a').removeClass('underline');
$(this).addClass('underline');
});
});
</script>
精彩评论