当我点击导航元素时,我想淡入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实例并不好,想知道我的案例是否有更好的实现?