HTML jquery按鈕有時不反應

嗨，我有幾個簡單的按鈕，有時不反應。它很少發生，但我仍然不喜歡它。如果點擊速度非常快或非常快速地更改導航，則會發生更多情況。這是我對他們的代碼：HTML jquery按鈕有時不反應

$(document).ready(function() { 
    $('[id*=txt]').hide(); 
    $('[id*=hd]').hide();     
    $('[id*=home]').show(); 
    $('#btnhome').css('background-color',"#555"); 
    $('#btnhome').css('opacity',"0.4"); 

    $('.button').click(function(){ 
     $('[id*=txt]').hide(); 
     $('[id*=hd]').hide(); 
     $('.button').css('background',"transparent"); 
     $('.button').css('opacity',"1"); 
     $(this).css('background-color',"#555"); 
     $(this).css('opacity',"0.4"); 
    });   

    $('#btnhome').click(function() { 
     $('[id*=home]').show();    
    });  

    $('#btnabout').click(function() {    
     $('[id*=about]').show();   
    });  

    $('#btncontact').click(function() {   
     $('[id*=contact]').show(); 
    }); 
});

這些按鈕：

<button class="button" id="btnhome">Home</button>   
<button class="button" id="btnabout">About</button> 
<button class="button" id="btncontact">Contact</button>

它們僅用於顯示和隱藏文本，他們也改變顏色混濁等時他們被點擊。當他們沒有反應時，根本沒有任何反應，就好像我沒有定義任何點擊功能。

來源

2012-12-25 user1880779

正如僅供參考，您可以通過用逗號分隔選擇器來簡化您的某些隱藏/顯示內容。 $（ '[ID * = TXT]，[ID * = HD]'）隱藏（））。 – jkinz

@jkinz謝謝。+ – user1880779

我想你想是這樣的

$(document).ready(function() { 
    $('.button').css({'background':'transparent', 'opacity':'1'}) 
    .eq(0).css({'background-color':'#555', 'opacity':"0.4"}); 

    $('.button').click(function(){ 
     $('.button').css({'background':'transparent', 'opacity':'1'}); 
     $(this).css({'background-color':'#555', 'opacity':'0.4'}); 
    });   
});

DEMO。

您也可以使用 $('#btnhome').css({'background-color':'#555', 'opacity':"0.4"});而不是.eq(0).css({'background-color':'#555', 'opacity':"0.4"});。

來源

2012-12-25 23:02:47

是的，這是更聰明的，但仍然不能解決問題時，按鈕20％，沒有反應點擊所有..我不知道爲什麼會發生這種情況？它可以連接到CSS？ – user1880779

@ user1880779，我可以看到他們工作正常。 –

請嘗試[DEMO]（http://jsfiddle.net/mMF5r/3/）。這是我基本上使用的，嘗試隨機打他們和快速切換。你會看到有時他們沒有反應。它很少（有時更頻繁），所以它不會在一開始發生，但它確實發生。所以試試好幾次。告訴我你是否注意到它，如果你知道問題在哪裏。 – user1880779

我會做這樣的事情（demo）

CSS

.current { 
    background-color: #555; 
    opacity: 0.4; 
    filter: alpha(opacity=40); 
}

HTML

<button class="button current" data-content="home">Home</button>   
<button class="button" data-content="about">About</button> 
<button class="button" data-content="contact">Contact</button> 
<hr> 
<div class="content" id="home">Home text</div> 
<div class="content" id="about">About text</div> 
<div class="content" id="contact">Contact text</div>

的Javascript

$(function() { 

    var setCurrent = function(el){ 
     var $el = $(el), 
      txtId = '#' + $el.attr('data-content'); 
     // show current content only 
     $('.content').hide(); 
     $(txtId).show(); 

     // update buttons 
     $el 
      .addClass('current') 
      .siblings().removeClass('current'); 
    }; 

    $('.button').click(function(){ 
     setCurrent(this); 
    }); 
    $('.current').trigger('click'); 

});

來源

2012-12-25 23:05:29 Mottie

HTML jquery按鈕有時不反應

回答

相關問題