当一个代码覆盖所有按钮时,如何在按钮单击时执行操作?

时间:2011-12-28 18:57:09

标签: jquery

我正在尝试为按钮点击创建一个轻量级代码,所以在某些人的帮助下,我现在有一个适用于所有按钮的代码。

我忘记的是,当我使用一个代码时,每个按钮如何执行唯一代码,例如加载不同的页面?

这是我现在拥有的一个例子: http://jsfiddle.net/pufamuf/pGmZV/

感谢大家的帮助:))))

编辑:每个按钮都应加载不同的页面,例如:

$('#content').load('SomePage.html', function() {});

2 个答案:

答案 0 :(得分:3)

为你的href添加更有意义的东西:

<a id="buttonone" class="menuCanBeActive" href="one.html"></a><BR>
<a id="buttontwo" class="menuCanBeActive" href="two.html"></a><BR>
<a id="buttonthree" class="menuCanBeActive" href="three.html"></a><BR>

添加然后在jQuery中使用它:

jQuery("#buttonone").addClass("menuActive");

//Menu Buttons
jQuery(document).delegate(".menuCanBeActive", "click", function(e) {  
    e.preventDefault();
    jQuery(".menuCanBeActive").removeClass("menuActive");
    jQuery(this).addClass("menuActive");
    $('#content').load(jQuery(this).attr("href"), function() {});
});

答案 1 :(得分:2)

您可以使用ID

jQuery(document).delegate(".menuCanBeActive", "click", function( e ) { 
    e.preventDefault();
    jQuery(".menuCanBeActive").removeClass("menuActive");
    jQuery(this).addClass("menuActive");

    var pageToLoad = '';
    switch( this.id ){
       case 'buttonone':
          pageToLoad = 'aaa.htm';
          break;
       case 'buttontwo':
          pageToLoad = 'bbb.htm';
          break;
       //etc
    }
    if( '' !== pageToLoad ){
       $('#content').load( pageToLoad, function() {});
    }
});