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>

主页
关于
接触

---

它们仅用于显示和隐藏文本，并且在单击时还会更改颜色不透明度等。当他们没有反应时，什么也不会发生，就像我没有定义任何单击功能一样。

我想你想要这样的东西

$(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'});
    });          
});​

你也可以使用

---

css（{'background-color'：'555'，'opacity'：“0.4”}）而不是

.eq（0）.css（{'background-color'：'555'，'opacity'：'0.4}）
我会这样做（）

CSS

HTML

​
 是的，这是聪明的，但这仍然不能解决问题，当按钮的20%在点击时根本没有反应。我不知道为什么会发生这种情况？它可以连接到css吗？试试这里。这就是我基本上使用的，尝试随机点击它们并快速切换。你会发现有时候他们没有反应。它很少（有时更频繁），所以一开始不会发生，但确实发生了。所以试几次吧。告诉我你是否注意到了，你是否知道问题出在哪里。我无法完全按照你所说的@user1880779重现问题。每当我点击按钮时，它都会工作，但我可以在特定情况下重现问题。尝试单击按钮，同时按住鼠标按钮，移动鼠标使按钮失去焦点，然后松开按钮。在这种情况下，单击不起作用。否则它对我来说很好…@EhsanT是的，这是一件很难注意到的事情，因为它每15次发生一次，但它仍然困扰着我。你必须按随机顺序做。不仅仅是按钮1、按钮2、按钮3，还有1、3、2、1、3、1、2、1、3、2、3、1……等等，而且越快发生的事情就越多。仅供参考，您可以通过用逗号分隔选择器（即$（“[id*=txt]，[id*=hd]”）。hide（）；）来简化一些隐藏/显示内容。
.current {
    background-color: #555;
    opacity: 0.4;
    filter: alpha(opacity=40);
}​

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

$(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');

});​