使用jQuery的水平div滑动

Question

I've found this little piece of code which fulfils my needs, but is there any way to make "target 1" be loaded defaultly? So "right" doesn't start as empty div, but with content from "target 1" already.

jQuery(function($) {

$('a.panel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active');

    if (!$target.hasClass('active')) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: $this.width()
            }, 500);
        });

        $target.addClass('active').show().css({
            left: -($target.width())
        }).animate({
            left: 0
        }, 500);
    }
});

});

http://jsfiddle.net/sg3s/rs2QK/

Answer 1

just a little addition

$('a[href=#target1]').click()

Demo

Answer 2

To have target1 be active be default, you need to give it an active class, and add display: block to it's style in the HTML

By not using javascript to set the target1 div to active the page doesn't need to load first before it appears in the right div. Meaning that if the page is heavy at all it won't flash white because it's waiting for the page to load.

<div class="panel active" id="target1" style="background:green; display:block;">Target 1</div>

Like this - http://jsfiddle.net/rs2QK/2291/