Question

我有以下请求...我希望有4个href标签，当我点击一个特定的标签时，显示一个div层，默认情况下在CSS中设置为隐藏。当我点击另一个href来显示另一个div并关闭前一个div。我想感谢任何帮助！

HTML

            <p><a href="#" id="btn1">Link1</a></p>
            <p><a href="#" id="btn2">Link2</a></p>
            <p><a href="#" id="btn3">Link3</a></p>
            <p><a href="#" id="btn4">Link4</a></p>

CSS

 #index_main_refSL {
     display:block;
     position:absolute;
     width:600px;
     height:495px;
     background:#09F;
     visibility:hidden;

    } 
#index_main_refFL {
     display:block;
     position:absolute;
     width:600px;
     height:495px;
     background:#C93;
     visibility:hidden;

    } 
#index_main_refFL2 {
     display:block;
     position:absolute;
     width:600px;
     height:495px;
     background:#96C;   
     visibility:hidden;

    } 
#index_main_refAm {
     display:block;
     position:absolute;
     width:600px;
     height:495px;
     background:#FF6;
     visibility:hidden;
    }

JQUERY

('#btn1').click(function(e) { 

            $('#index_main_refSL').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);
            $('#index_main_refSL').stop();
            $('#index_main_refFL').hide();
            $('#index_main_refFL2').hide();
            $('#index_main_refAm').hide();




    });
    $('#btn2').click(function(e) { 

            $('#index_main_refFL').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);
            $('#index_main_refSL').stop();
            $('#index_main_refSL').hide();
            $('#index_main_refFL2').hide();
            $('#index_main_refAm').hide();
            /*$('#index_main_refFL').stop();*/


    });
    $('#btn3').click(function(e) { 

            $('#index_main_refFL2').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);
            $('#index_main_refSL').stop();
            $('#index_main_refSL').hide();
            $('#index_main_refFL').hide();
            $('#index_main_refAm').hide();
            /*$('#index_main_refFL2').stop();*/


    });
    $('#btn4').click(function(e) { 
            $('#index_main_refAm').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);
            $('#index_main_refSL').stop();
            $('#index_main_refSL').hide();
            $('#index_main_refFL').hide();
            $('#index_main_refFL2').hide();
            /*$('#index_main_refAm').stop();*/


    });

Answer 1

您可以使用fadeIn()代替animate()

 $('#btn1').click(function(e) { 
     $('#index_main_refSL').fadeIn('slow');
     $('#index_main_refFL,#index_main_refFL2,#index_main_refAm').fadeOut(); //multiselector

});

并在CSS ..change display:block到none

#index_main_refSL {
  display:none;
  position:absolute;
  width:600px;
  height:495px;
  background:#09F;
}

如何使用jquery启用/禁用div层

1 个答案: