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

您需要以document.ready方式添加它：

$(function(){

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

});

UPDATED FIDDLE

Answer 2

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

＆＃13;

$(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");
 });
});
});

＆＃13;

 .content {
 display: none;
     }

＆＃13;

<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>

＆＃13;

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

2 个答案: