Skript umschalten, wenn anderes div geklickt wird

Question

In Ordnung. Also benutze ich dieses einfache Skript, das divs umschaltet. Sie alle wissen, wie es funktioniert, ich bin mir sicher.

<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> 

So jetzt habe ich zwei Fragen. Die erste ist: Wenn Sie das #about-div umschalten, erscheint es so, wie es sein sollte. Aber wenn du dann auf #showservices klickst, sollte das über div entfernt und durch die Services ersetzt werden, sie sollten nicht über die anderen gehen.

Und die zweite Frage ist; Wie kann ich all das in ein Skript umwandeln? Es scheint dumm zu sein, 4 's zu haben, wenn ich sicher bin, dass alle in ein saubereres Skript passen.

Answer 1

Ich denke, Sie können Dinge vereinfachen, indem Sie einige Kontext in Datenattribute speichern. Ich habe auch ein wenig CSS von der Inline genommen, um es ein wenig einfacher zu lesen. Ich denke, das ist der Effekt, den Sie anstreben (eine Überblendung zwischen Ergebnisfenstern), aber wenn nicht, lassen Sie es mich wissen und ich werde sehen, was ich tun kann, um zu helfen.

$(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

Funktioniert das?

<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

Geben Sie auf alle Ihre Seiten DIV sa Klasse wie class="page"
und auf alle Ihre Tasten eine Klasse wie class="btn"

als dies sollte die Arbeit machen:

<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> 

verblassen zu kombinieren oder Folie, in der Logik oben als Sie können auch etwas tun wie:

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