为页面加载时加载的.click函数指定默认值

Question

当页面加载时，是否有一种简单的方法可以让我的一个div加载为默认值？

基本上我想向读者展示页面加载时的第一个div（d1）内容，并用动画保持内聚。

HTML/CSS

<style> 
.content { 
display: none; 
} 
</style> 
<script src="//cdn.jsdelivr.net/velocity/1.2.1/velocity.min.js"></script> 
<script src="//cdn.jsdelivr.net/velocity/1.2.1/velocity.ui.min.js"></script> 

<ul> 
<li><a href="" data-id="d1" class="side">Link 1</a></li> 
<li><a href="" data-id="d2" class="side">Link 2</a></li> 
<li><a href="" data-id="d3" class="side">Link 3</a></li> 
<li><a href="" data-id="d4" class="side">Link 4</a></li> 
</ul> 

<div class="content" id="d1"> 
Lorem ipsum 1. 
</div> 

<div class="content" id="d2"> 
Lorem ipsum 2. 
</div> 

<div class="content" id="d3"> 
Lorem ipsum 3. 
</div> 

<div class="content" id="d4"> 
Lorem ipsum 4. 
</div> 

的Javascript W/JQuery的2.1.0

$('.side').click(function (ev) { 
"use strict"; 
ev.preventDefault(); 
var id = $(this).data("id"); 
$(".side").not($(this).toggleClass("active")).removeClass("active"); 

$.when($(".content").not($("#" + id)).velocity("transition.slideUpOut")).done(function() { 
    $("#" + id).velocity("transition.slideDownIn"); 
}); 
}); 

http://jsfiddle.net/4hf7ygra/3/

Answer 1

call velocity method on first article id on document load event $("#d1").velocity("transition.slideDownIn"); 

$(function(){ 
 

 
$("#d1").velocity("transition.slideDownIn"); 
 
    $('.side').click(function (ev) { 
 
"use strict"; 
 
ev.preventDefault(); 
 
var id = $(this).data("id"); 
 
$(".side").not($(this).toggleClass("active")).removeClass("active"); 
 

 
$.when($(".content").not($("#" + id)).velocity("transition.slideUpOut")).done(function() { 
 
    $("#" + id).velocity("transition.slideDownIn"); 
 
}); 
 
}); 
 
});

.content { 
 
display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="http://cdn.jsdelivr.net/velocity/1.2.1/velocity.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/velocity/1.2.1/velocity.ui.min.js"></script> 
 
<ul> 
 
<li><a href="" data-id="d1" class="side">Link 1</a></li> 
 
<li><a href="" data-id="d2" class="side">Link 2</a></li> 
 
<li><a href="" data-id="d3" class="side">Link 3</a></li> 
 
<li><a href="" data-id="d4" class="side">Link 4</a></li> 
 
</ul> 
 

 
<div class="content" id="d1"> 
 
Lorem ipsum 1. 
 
</div> 
 

 
<div class="content" id="d2"> 
 
Lorem ipsum 2. 
 
</div> 
 

 
<div class="content" id="d3"> 
 
Lorem ipsum 3. 
 
</div> 
 

 
<div class="content" id="d4"> 
 
Lorem ipsum 4. 
 
</div>

Answer 2

你需要这种方式添加它document.ready：

$(function(){ 

$("#d1").velocity("transition.slideDownIn"); 

}); 

UPDATED FIDDLE