0

こんにちは、時々反応しない単純なボタンがいくつかあります。めったに起こりませんが、私はまだそれが好きではありません。非常に速くクリックしたり、ナビゲーションを非常に速く変更したりすると、より多く発生します。これは私が持っているコードです:

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

これらはテキストの表示と非表示にのみ使用され、クリックすると色の不透明度なども変更されます。クリック機能が定義されていないかのように、反応しない場合は何も起こりません。

4

2 に答える 2

0

私はあなたがこのようなものが欲しいと思います

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

デモ。

$('#btnhome').css({'background-color':'#555', 'opacity':"0.4"});の代わりに使用することもできます .eq(0).css({'background-color':'#555', 'opacity':"0.4"});。

于 2012-12-25T23:02:47.660 に答える
0

私はこのようなことをします（デモ）

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

});​

</p>

于 2012-12-25T23:05:29.520 に答える