0

我在列表中有一堆导航链接。每次我点击一个我想要的链接时，显示一些 DIV 并隐藏所有其他的。这是常见的内容面板模式。

我不能这样做：

<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>

但我可以通过使用匿名函数使其工作：

<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>

有人可以解释为什么一种方法有效而另一种方法无效吗？

4

3 回答 3

1

您需要传递nameoffunction而不是调用它。

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

您可以使用id当前元素的来生成选项卡的IDshow_tab

function show_tab()
{    
    jQuery(".tab").hide();  
    jQuery("#" + this.id + "_tab").toggle();    
}
于 2013-01-16T11:55:14.887 回答
1

改变：

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

至

jQuery("#login").click( function() {
 show_tab("#login_tab");
});
jQuery("#projects").click( function() {
    show_tab("#projects_tab");
});
于 2013-01-16T11:57:29.857 回答
1

当你这样做...

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

它show_tab("#login_tab")立即运行并将结果用作.click处理程序分配中的参数。如果你需要传递一个函数而不运行它，那么你必须在没有括号的情况下引用它。你可以这样做...

jQuery("#login").click( function() {
    show_tab("#login_tab");
} );

甚至这个...

jQuery("#login").click( show_login_tab );

function show_login_tab() {
    show_tab("#login_tab");
}

本质上，这与创建匿名函数相同，就像您在工作版本中所做的那样。

于 2013-01-16T11:59:28.690 回答