Question

I have a bunch of navigation links inside a list. Each time I click a link I want so show some DIV and hide all the others. It’s the common content panel pattern.

I can’t make it work by doing this:

<script type="text/javascript">
jQuery(document).ready(function() {

function show_tab(t) {
    jQuery(".tab").hide();
    jQuery(t).toggle();
}

jQuery("#login").click( show_tab("#login_tab") );

jQuery("#projects").click( show_tab("#projects_tab") );

});
</script>

But I can make it work just by using an anonymous function:

<script type="text/javascript">
jQuery(document).ready(function() {

jQuery("#login").click(function()
{
jQuery(".tab").hide();
jQuery("#login_tab").toggle();
});

jQuery("#projects").click(function()
{
jQuery(".tab").hide();
jQuery("#projects_tab").toggle();
});

});
</script>

Can somebody explain why one method works and the other doesn’t?

Answer 1

You need to pass the name of function instead of calling it.

jQuery("#login").click( show_tab );    
jQuery("#projects").click( show_tab) );

You can use the id of current element to generate the id of tab in show_tab

function show_tab()
{    
    jQuery(".tab").hide();  
    jQuery("#" + this.id + "_tab").toggle();    
}