0

私は 4 つの div を持っています。一度に 1 つの div だけを表示したいので、次のコードを使用しています。正しく動作しているので、div にアニメーションを追加したいと考えています。リンクをクリックすると、div が左から右に移動するはずです。これは私の作業リンクです

スライドのようにする必要があります

これは私のhtmlコードです

<div id="div1">
  This is div 1
</div>
<div id="div2">
    This is div 2

</div>
<div id="div3">
   This is div 3
</div>
<div id="div4">
  This is div4
</div>
<div id="post_links"> 
  <span id="show1" class="post_active_link">Div1</span>
 <span id="show2">Div2</span>
 <span id="show3">Div3</span>
 <span id="show4">Div4</span>

</div>

これはjqueryコードです

     $(document).on('click', '#show1', function (event) {
               $('#div1').show();
              $('#div2').hide();
                 $('#div3').hide();
                $('#div4').hide();
 $('#show1').addClass('post_active_link');
 $('#show2').removeClass('post_active_link');
 $('#show3').removeClass('post_active_link');
  $('#show4').removeClass('post_active_link');

           });


            $(document).on('click', '#show2', function (event) {

           $('#div1').hide();
           $('#div2').show();
          $('#div3').hide();
          $('#div4').hide();
      $('#show1').removeClass('post_active_link');
      $('#show2').addClass('post_active_link');
      $('#show3').removeClass('post_active_link');
      $('#show4').removeClass('post_active_link');



         });

          $(document).on('click', '#show3', function (event) {
           $('#div1').hide();
            $('#div2').hide();
            $('#div3').show();
           $('#div4').hide();
    $('#show1').removeClass('post_active_link');
    $('#show2').removeClass('post_active_link');
    $('#show3').addClass('post_active_link');
    $('#show4').removeClass('post_active_link');
             });


           $(document).on('click', '#show4', function (event) {
              $('#div1').hide();
            $('#div2').hide();
              $('#div3').hide();
              $('#div4').show();
      $('#show1').removeClass('post_active_link');
      $('#show2').removeClass('post_active_link');
      $('#show3').removeClass('post_active_link');
      $('#show4').addClass('post_active_link');
           });

これは私のcssコードです

.post_active_link{
    background:#666666;
   }
#div1{
    display:block;
    padding:50px;
    border: 1px solid #666666;
}
#div2,#div3,#div4{
    display:none;
   padding:50px;
    border: 1px solid #666666;
}
#post_links{
    margin-top:10px; 
}
#show1,#show2,#show3,#show4{
    font-weight:bold;
    cursor:pointer;
    padding:10px;

}
4

3 に答える 3

0 
<script>
$(document).on('click', '#show1', function (event) {
    $('#div1').animate({width: 'show'},"slow");
    $('#div2').hide();
    $('#div3').hide();
    $('#div4').hide();
    $('#show1').addClass('post_active_link');
    $('#show2').removeClass('post_active_link');
    $('#show3').removeClass('post_active_link');
    $('#show4').removeClass('post_active_link');
});

$(document).on('click', '#show2', function (event) {
    $('#div1').hide();
    $('#div2').animate({width: 'show'},"slow");
    $('#div3').hide();
    $('#div4').hide();
    $('#show1').removeClass('post_active_link');
    $('#show2').addClass('post_active_link');
    $('#show3').removeClass('post_active_link');
    $('#show4').removeClass('post_active_link');
});

$(document).on('click', '#show3', function (event) {
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').animate({width: 'show'},"slow");
    $('#div4').hide();
    $('#show1').removeClass('post_active_link');
    $('#show2').removeClass('post_active_link');
    $('#show3').addClass('post_active_link');
    $('#show4').removeClass('post_active_link');
});


$(document).on('click', '#show4', function (event) {
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
    $('#div4').animate({width: 'show'},"slow");
    $('#show1').removeClass('post_active_link');
    $('#show2').removeClass('post_active_link');
    $('#show3').removeClass('post_active_link');
    $('#show4').addClass('post_active_link');
});
</script>
于 2013-09-19T10:35:05.617 に答える