JQuery के साथ क्षैतिज div स्लाइडिंग

मुझे कोड का यह छोटा टुकड़ा मिला है जो मेरी ज़रूरतों को पूरा करता है, लेकिन क्या "लक्ष्य 1" को डिफ़ॉल्ट रूप से लोड करने का कोई तरीका है? तो "दाएं" खाली div के रूप में शुरू नहीं होता है, लेकिन पहले से ही "लक्ष्य 1" से सामग्री के साथ।

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/

0

2 उत्तर

बस थोड़ा सा जोड़ा

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

डेमो

0
जोड़ा

लक्ष्य 1 सक्रिय होने के लिए डिफ़ॉल्ट होने के लिए, आपको इसे सक्रिय वर्ग देना होगा, और HTML में इसकी शैली में display: block जोड़ें

लक्ष्य 1 div को सक्रिय करने के लिए जावास्क्रिप्ट का उपयोग न करने के लिए पृष्ठ को सही div में प्रकट होने से पहले लोड करने की आवश्यकता नहीं है। इसका मतलब यह है कि यदि पृष्ठ भारी है तो यह सफेद नहीं होगा क्योंकि यह पृष्ठ लोड होने का इंतजार कर रहा है।

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

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

0
जोड़ा