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

Question

我有以下请求...我想要 4 个 href 标签，当我点击一个特定的标签时显示一个 div 层，该层在 CSS 中默认设置为隐藏。当我单击另一个 href 以显示另一个 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 中将 display:block 更改为 none

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