Question

Using jquery I have a clicking tab mechanism that are nothing but anchor tags that return false but call javascript functions to run some events on the page. The problem is I am using jquery to apply an opacity style to the active anchor. and the other sibling anchor get a lesser opacity view. My code looks like this

$("#menutab li a").click(function(){
 $(this).animate({opacity:'1'},1000);
  $(this).siblings().animate({opacity:'.25'},1000);
}

I would think this code would act only on the clicked element and apply that css style to that element and the other style to the other anchor tags except the clicked one. It kind of does that, but also what it does is leave the earlier clicked element to opacity =1, so if I click an element it sets it opacity to 1 and then if I click another one it sets it opacity to 1 while leave the earlier clicked one to 1 also instead of setting it to .25 like the others.

Edit:
I changed the above code to:

$("#menutab ul li").click(function(){
 $(this).children().animate({opacity:'1'},1000);
  $(this).siblings().children().animate({opacity:'.25'},1000);
});

and now I get the desired effect, except that when the first anchor in the list is clicked doesn’t follow the event rules, When the first one is clicked its as if, the click event is not triggered, because no opacity style changes. which I don’t understand.

Answer 1

This works perfect for me, even when clicking the first anchor in the list:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("#menutab ul li").click(function(){
     $(this).children().animate({opacity:'1'},1000);
      $(this).siblings().children().animate({opacity:'.25'},1000);
    });
});

</script>   
<div id="menutab">
    <ul>
        <li><a href="javascript: return false;" >Test1</a></li>
        <li><a href="javascript: return false;" >Test2</a></li>
        <li><a href="javascript: return false;" >Test3</a></li>
        <li><a href="javascript: return false;" >Test4</a></li>
        <li><a href="javascript: return false;" >Test5</a></li>
    </ul>
</div>