javascript - JQuery 单页淡入/淡出切换(带导航)

Question

伙计们!长期潜伏者。第一个问题。

带有导航菜单的简单页面，可触发淡入内容 div。点击功能淡入，如果toggle-target != 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

您可以使用以选择器开头的属性、.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>