他のdivをクリックしたときにスクリプトを切り替えます

Question

いいえ。だから私はdivをトグルするこの単純なスクリプトを使用しています。あなたはすべてそれがどのように動作するか、私は確信している。

<div class="side-menu"> <!-- on click na sliku -> otvara div -> fadein --> 
    <div id="showabout"> 
    <img src="img/info.png" class="hvr-grow" style="cursor: pointer;"> 
    </div> 
    <br> 
    <div id="showservices"> 
    <img src="img/list.png" class="hvr-grow" style="cursor: pointer;" > 
    </div> 
    <br> 
    <div id="showportfolio"> 
    <img src="img/briefcase.png" class="hvr-grow" style="cursor: pointer;"> 
    </div> 
    <br> 
    <div id="showcontact"> 
    <img src="img/phone-call.png" class="hvr-grow" style="cursor: pointer;"> 
    </div> 
</div> 

<div class="main"> 
    <div id="about" style="display: none;"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-6 col-md-8"> 
       <p> About Us </p> 
      </div> 
     </div> 
    </div> 
    <div id="services" style="display: none;"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-6 col-md-8"> 
       <p> Services </p> 
      </div> 
     </div> 
    </div> 
    <div id="portfolio" style="display: none;"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-6 col-md-8"> 
       <p> Portfolio </p> 
      </div> 
     </div> 
    </div> 
    <div id="contact" style="display: none;"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-6 col-md-8"> 
       <p> Contact </p> 
      </div> 
     </div> 
    </div> 
</div> 
    <script> 
     $(document).ready(function() { 
      $('#showabout').click(function() { 
        $('#about').fadeToggle("slow"); 
      }); 
     }); 
    </script> 
    <script> 
     $(document).ready(function() { 
      $('#showservices').click(function() { 
        $('#services').slideToggle("slow"); 
      }); 
     }); 
    </script> 
    <script> 
     $(document).ready(function() { 
      $('#showportfolio').click(function() { 
        $('#portfolio').fadeToggle("slow"); 
      }); 
     }); 
    </script> 
    <script> 
     $(document).ready(function() { 
      $('#showcontact').click(function() { 
        $('#contact').slideToggle("slow"); 
      }); 
     }); 
    </script> 

これで2つの質問があります。最初のものは次のとおりです。#about divを切り替えると、表示されるようになります。しかし、#showservicesをクリックするとdivに関する部分が削除され、サービスに置き換えられるはずです。

2番目の質問は次のとおりです。これらをすべて1つのスクリプトにするにはどうすればよいですか？彼らはすべてが1つのクリーンなスクリプトに収まると確信しているとき、4のものを持っていることは馬鹿に思えます。

Answer 1

私はあなたがデータ属性にいくつかのコンテキストを保存することで事を単純化できると思います。また、少し読​​みやすくするため、インラインで少しCSSを取りました。私はこれがあなたが達成しようとしている効果だと思っています（結果ペイン間のクロスフェード）が、私に知らせていない場合は、私が何を手伝ってくれるかを見ていきます。

$(function(){ 
 

 
    $(".side-menu .slide-menu-item").on("click", function(){ 
 
    var $target = $("#" + $(this).attr("data-target")); 
 
    $target.siblings().fadeOut(); 
 
    $target.fadeIn(); 
 
    }); 
 

 
});

.slide-menu-item { cursor: pointer; margin-bottom: 1em; } 
 
.main { position: relative; } 
 
.main .panel { position: absolute; display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="side-menu"> <!-- on click na sliku -> otvara div -> fadein --> 
 
    <div id="showabout" class="slide-menu-item" data-target="about"> 
 
    <img src="img/info.png" class="hvr-grow"> 
 
    </div> 
 
    <div id="showservices" class="slide-menu-item" data-target="services"> 
 
    <img src="img/list.png" class="hvr-grow"> 
 
    </div> 
 
    <div id="showportfolio" class="slide-menu-item" data-target="portfolio"> 
 
    <img src="img/briefcase.png" class="hvr-grow"> 
 
    </div> 
 
    <div id="showcontact" class="slide-menu-item" data-target="contact"> 
 
    <img src="img/phone-call.png" class="hvr-grow"> 
 
    </div> 
 
</div> 
 

 
<div class="main"> 
 
    <div id="about" class="panel"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-sm-6 col-md-8"> 
 
       <p> About Us </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div id="services" class="panel"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-sm-6 col-md-8"> 
 
       <p> Services </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div id="portfolio" class="panel"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-sm-6 col-md-8"> 
 
       <p> Portfolio </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div id="contact" class="panel"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-sm-6 col-md-8"> 
 
       <p> Contact </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

これは機能しますか？

<script> 
$(document).ready(function() { 
    $('#showabout').click(function() { 
      $('#about').fadeToggle("slow"); 
    }); 
    $('#showservices').click(function() { 
      $('#about').hide(); 
      $('#services').slideToggle("slow"); 
    }); 
    $('#showportfolio').click(function() { 
      $('#portfolio').fadeToggle("slow"); 
    }); 
    $('#showcontact').click(function() { 
      $('#contact').slideToggle("slow"); 
    }); 
}); 
</script> 

Answer 3

これよりclass="btn"

のようなクラスは、仕事をする必要があります
class="page"ようにし、すべてのボタンにすべてのページDIV SAクラスに与える：

<script> 
    jQuery(function($) { // DOM ready 

    var $pages = $(".page"); // Get all pages! 

    $('.btn').click(function() { 
     // Every .btn has an ID "showsomething". let's get the suffix after "show"*** 
     var pageId = this.id.split("show")[1]; 
     var $page = $("#"+ pageId); 
     $pages.not($page).slideUp(); 
     $page.slideToggle(); 
    }); 

    }); 
</script> 

フェードを結合したり、スライド以上のロジックでは、次のようなこともできます：

if(pageId==="someDesiredId") { 
    // do this animation 
} else { 
    // do else kind of animation 
}