更好的jQuery.hide()实现?

时间:2017-04-26 09:19:11

标签: jquery html performance

当我点击导航元素时,我想淡入div,为此我使用以下代码(正常工作)。

$(document).ready(function() {
  $('#myPage1').click(function() {
    $('#div3, #div2').hide();
    $("#div1").velocity("fadeIn", {
      duration: 150
    });
  });
  
  $('#myPage2').click(function() {
    $('#div1, #div3').hide();
    $("#div2").velocity("fadeIn", {
      duration: 150
    });
  });
  
  $('#myPage3').click(function() {
    $('#div1, #div2').hide();
    $("#div3").velocity("fadeIn", {
      duration: 150
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="nav-wrapper container">
    <a href="index.html" class="brand-logo"></a>
    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="icon ion-android-menu hvr-icon-spin" style="font-size:32px;"></i></a>
    <ul class="right hide-on-med-and-down">
      <li class="active"><a id="myPage1" href="#">Page1</a></li>
      <li><a id="myPage2" href="#">Page2</a></li>
      <li><a id="myPage3" href="#">Page3</a></li>
    </ul>
  </div>
</nav>

<div id="div1" class="container"></div>
<div id="div2" class="container"></div>
<div id="div3" class="container"></div>

但是我已经读过使用多个hide实例并不好,想知道我的案例是否有更好的实现?

0 个答案:

没有答案