0

我有以下要求...我想要 4 个 href 标签，当我单击特定标签以显示在 CSS 中默认设置为隐藏的 div 层时。当我单击另一个 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;
    }

查询 

('#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();*/


    });
4

1 回答 1

3

那么你可以使用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;
}
于 2013-11-08T08:54:30.467 回答