JQuery單頁淡入淡出Toggle Toggle w/Nav

Question

Dudes！長期潛伏者。第一個問題。

帶導航菜單觸發淡入內容div的簡單頁面。淡入點擊功能，淡出如果切換目標！= href（「＃」）。腳本的作品，但這是一個工作。這裏必須有一個更簡單的方法。

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> 

有沒有辦法有一個肘節類函數，如果A HREF = = #div，淡入？否則，淡出？

爲了清楚起見，我不希望用戶在同一導航目標的第二次點擊時淡出fadeToggle。只有選擇了新的目標，當前div才淡出。

謝謝，人！

Answer 1

這將是我的褪色解決方案。這不完全是你正在尋找的解決方案，但我相信你可以改變它來做你想做的事情。您也可以在元素上設置.data以瞭解該元素是否已經褪色。

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

我的建議是：

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

您可以使用屬性開始選擇，.filter()，.stop()，if條件與動畫

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