javascript - 将默认值分配给页面加载时加载的 .click 函数

Question

有没有一种简单的方法可以让我的一个 div 在页面加载时作为默认 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>

带有 JQuery 2.1.0 的 Javascript

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