Question

嗨，我有几个简单的按钮，有时候不会做出反应。它很少发生，但我仍然不喜欢它。如果您非常快速地点击或更快地更改导航，它会发生更多。这是我给他们的代码：

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

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

Answer 1

我想你想要这样的东西

$(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"});。

Answer 2

我会做这样的事情（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');

});

HTML jquery按钮有时没有反应

2 个答案: