JQuery Einzelne Seite Ein/Aus Toggle w/Nav

Question

Dudes! Langjähriger Lauerer. Erste Frage.

Einfache Seite mit Navigationsmenü, Fade-In-Inhalt div. Fade-in bei Klick-Funktion, Fade-out bei Toggle-Ziel! = Href ("#"). Skript funktioniert, aber das ist eine Arbeit. Es muss eine einfachere Methode geben.

JS:

$(document).ready(function(){ 

$(".toggle1").click(function(){ 

    $('#div1').delay(500).fadeIn('fast'); 
    $('#div2').fadeOut('slow'); 
    $('#div3').fadeOut('slow'); 

}); 

$(".toggle2").click(function(){ 

    $('#div2').delay(500).fadeIn('fast'); 
    $('#div1').fadeOut('slow'); 
    $('#div3').fadeOut('slow'); 

}); 

$(".toggle3").click(function(){ 

    $('#div3').delay(500).fadeIn('fast'); 
    $('#div1').fadeOut('slow'); 
    $('#div2').fadeOut('slow'); 

    }); 
}); 

HTML:

<div class="nav"> 
     <ul> 
      <li><a class="toggle1" href="#div1">div1</a></li> 
      <li><a class="toggle2" href="#div2">div2</a></li> 
      <li><a class="toggle3" href="#div3">div3</a></li>   
     </ul> 
    </div> 

Gibt es eine Möglichkeit ONE Toggle-Klasse Funktion zu haben, und wenn die a href == #div, Fade-in? Sonst, Ausblenden?

Aus Gründen der Übersichtlichkeit möchte ich nicht, dass der Benutzer fadeToggle bei einem zweiten Klick desselben Nav-Ziels ausblendet. Nur wenn ein neues Ziel ausgewählt wird, wird das aktuelle div ausgeblendet.

Danke, Leute!

Answer 1

Dies wäre meine Überblendlösung. Dies ist nicht genau Ihre Lösung, die Sie suchen, aber ich bin sicher, dass Sie es ändern können, um zu tun, was Sie wollen, dass das Konzept dort ist. Sie können auch .data für das Element festlegen, um zu wissen, ob dieses Element bereits ausgeblendet ist.

https://api.jquery.com/jquery.data/

$(document).ready(function(){ 
 
    $(".toggle1").click(function() { 
 
     href = $(this).attr("href"); 
 
     if(href.includes("#div")) { 
 
     $('a[href=#div1]').delay(500).fadeIn('fast'); 
 
     $('a[href=#div2]').fadeOut('slow'); 
 
     $('a[href=#div3]').fadeOut('slow'); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav"> 
 
     <ul> 
 
      <li><a class="toggle1" href="#div1">div1</a></li> 
 
      <li><a class="toggle2" href="#div2">div2</a></li> 
 
      <li><a class="toggle3" href="#div3">div3</a></li>   
 
     </ul> 
 
    </div> 
 
<div id="fademe"> 
 
testing 
 
</div>

Answer 2

Mein Vorschlag ist:

$(function() { 
 
    $('[href^="#div"]').click(function() { 
 
    $(this).delay(500).fadeIn('fast'); 
 
    var siblings = $(this).parent().siblings(); 
 
    $('[href="' + siblings.eq(0).children('a').attr("href") + '"]').fadeOut('slow', function() { 
 
     $('[href="' + siblings.eq(1).children('a').attr("href") + '"]').fadeOut('slow'); 
 
    }); 
 
    }); 
 
    
 
    $('#btn').on('click', function(e) { 
 
    $('[href^="#div"]').show(); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div class="nav"> 
 
    <ul> 
 
     <li><a class="toggle1" href="#div1">div1</a></li> 
 
     <li><a class="toggle2" href="#div2">div2</a></li> 
 
     <li><a class="toggle3" href="#div3">div3</a></li> 
 
    </ul> 
 
</div> 
 

 
<button id="btn">Make visible all elements</button>

Answer 3

Sie Attribut verwenden können mit Wahl beginnt, .filter(), .stop(), if Bedingung für das Element zu überprüfen opacity bevor mit Animation fortfahren

$().ready(function() { 
 
    $("[class^=toggle]").click(function(e) { 
 
    e.preventDefault(); 
 
    var hash = $("#" + this.href.split(/#/).pop()); 
 
    if (hash.css("opacity") < 1) { 
 
     $("[id^=div]").stop().fadeTo("fast", 0) 
 
     .filter(hash).delay(500).fadeTo("slow", 1) 
 
    } 
 
    }) 
 
})

[id^="div"] { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div class="nav"> 
 
    <ul> 
 
    <li><a class="toggle1" href="#div1">div1</a> 
 
    </li> 
 
    <li><a class="toggle2" href="#div2">div2</a> 
 
    </li> 
 
    <li><a class="toggle3" href="#div3">div3</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div id="div1">div 1</div> 
 
<div id="div2">div 2</div> 
 
<div id="div3">div 3</div>