पेज लोड

Question

पर jQuery आईएमजी और टेक्स्ट मैनिपुलेशन सक्रिय करें मैंने एक छोटा बूटस्ट्रैप 3 थंबनेल टेक्स्ट और आईएमजी मैनिपुलेशन बनाया है, अब मुझे यह सवाल है कि पेज लोड होने पर यह सक्रिय कैसे करें, मैं विशिष्ट हूं कि #anime1 सक्रिय हो जब पृष्ठ लोड होता है।

यह manipulation उदाहरण देखें। आप देखेंगे कि मेरे पास केवल प्रदर्शित होने वाले थंबनेल का एक समूह है, लेकिन जब आप हेरफेर के साथ बातचीत करते हैं तो यह चयनित navbar शीर्षक के लिए आपको जो कुछ भी देखने की आवश्यकता है, प्रदर्शित करेगा।

तो मैं इसे पृष्ठ लोड पर कैसे सक्रिय कर सकता हूं?

$(function(){ 
    $('#anime1').click(function(){ 

     $('.column').each(function(){ 
      $(this).hide(500); 
     }); 
     $('.columns').each(function(){ 
      $(this).show(500); 

     $('#col1 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col1 h3').text('Grouting!'); 
     $('#col1 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col2 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col2 h3').text('Grouting!'); 
     $('#col2 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col3 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col3 h3').text('Grouting!'); 
     $('#col3 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col4 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Grouting!'); 
     $('#col4 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col5 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col5 h3').text('Grouting!'); 
     $('#col5 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col6 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col6 h3').text('Grouting!'); 
     $('#col6 p:first').text('Grouting retention text will be displayed here!'); 
     }); 
    }); 

    $('#anime2').click(function(){ 
     $('.columns').hide(500); 
     $('.column').hide(500); 
    }); 
    $('#anime2').click(function(){ 
     $('.col4').show(500); 

     $('#col4 img').attr('src', 'img/lazy0.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Ground Improvements!'); 
     $('#col4 p:first').text('Ground Improvements text will be displayed here!'); 
    }); 

    $('#anime3').click(function(){ 
     $('.column').each(function(){ 
      $(this).show(500); 
     }); 
     $('.columns').each(function(){ 
      $(this).show(500); 
     }); 
     $('#col1 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col1 h3').text('Earth Retention!'); 
     $('#col1 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col2 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col2 h3').text('Earth Retention!'); 
     $('#col2 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col3 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col3 h3').text('Earth Retention!'); 
     $('#col3 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col4 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Earth Retention!'); 
     $('#col4 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col5 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col5 h3').text('Earth Retention!'); 
     $('#col5 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col6 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col6 h3').text('Earth Retention!'); 
     $('#col6 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col7 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col7 h3').text('Earth Retention!'); 
     $('#col7 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col8').hide(500); 
    }); 

    $('#anime4').click(function(){ 
     $('.column').each(function(){ 
      $(this).show(500); 
     }); 
     $('.columns').each(function(){ 
      $(this).show(500); 
     }); 
     $('#col1 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col1 h3').text('Structural Support!'); 
     $('#col1 p:first').text('Structural Support text will be displayed here!'); 

     $('#col2 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col2 h3').text('Structural Support!'); 
     $('#col2 p:first').text('Structural Support text will be displayed here!'); 

     $('#col3 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col3 h3').text('Structural Support!'); 
     $('#col3 p:first').text('Structural Support text will be displayed here!'); 

     $('#col4 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Structural Support!'); 
     $('#col4 p:first').text('Structural Support text will be displayed here!'); 

     $('#col5 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col5 h3').text('Structural Support!'); 
     $('#col5 p:first').text('Structural Support text will be displayed here!'); 

     $('#col6 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col6 h3').text('Structural Support!'); 
     $('#col6 p:first').text('Structural Support text will be displayed here!'); 

     $('#col7 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col7 h3').text('Structural Support!'); 
     $('#col7 p:first').text('Structural Support text will be displayed here!'); 

     $('#col8 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col8 h3').text('Structural Support!'); 
     $('#col8 p:first').text('Structural Support text will be displayed here!'); 

    }); 

    $('#anime5').click(function(){ 
     $('.column').hide(500); 
     $('.columns').hide(500); 
    }); 
    $('#anime5').click(function(){ 
     $('.col4').show(500); 

     $('#col4 img').attr('src', 'img/lazy0.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Additional Technologies!'); 
     $('#col4 p:first').text('Additional Technologies text will be displayed here!'); 
    }); 

}); 

थंबनेल:

<div class="row"> 
    <div class=" col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-lg-12"> 
      <ul class="nav nav-pills"> 
       <li role="presentation"><a id="anime1" href="#">Grouting</a></li> 
       <li role="presentation"><a id="anime2" href="#">Ground Improvements</a></li> 
       <li role="presentation"><a id="anime3" href="#">Earth Retention</a></li> 
       <li role="presentation"><a id="anime4" href="#">Structural Support</a></li> 
       <li role="presentation"><a id="anime5" href="#">Additional Technologies</a></li> 
      </ul> 
    </div> 
</div> 

    <div class="row"> 
     <p style="padding: 10px;"></p> 
    </div> 

     <div class="row"> 
      <div id="col1" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col2" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end--> 
      </div> 

      <div id="col3" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col4" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 animate_col4"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">Ovo ce da se animira za Additionl technologies.</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col5" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">Ovaj ce da se animira za Ground Impovements!</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col6" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col7" class="column col-xs-2 col-sm-2 col-md-2 col-md-offset-4 col-lg-2 col-lg-offset-4"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col8" class="column col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 
     </div><!--/ end thumbnai row --> 

Answer 1

हैंडलर चयनकर्ता

$('#anime1').click(function(){ 
    //... all the code you have 
}); 

संशोधित करने के लिए एक ट्रिगर जोड़ें:

$('#anime1').click(function(){ 
    //... all the code you have 
}).trigger('click'); 

संपादित करें: टिप्पणी प्रति संशोधित कोड।

• कोड कार्यात्मक लेकिन संभावना है बनाए रखने के लिए एक दर्द होने के लिए: कोड की समीक्षा

  ध्यान दें कि यह के कुछ पसंद है और कुछ overkill हो सकता है, मैं प्रत्येक परिवर्तन पर अपना तर्क रखा जाएगा हार्ड कोड आईडी के कारण कोड में मार्कअप में समान होना आवश्यक है।

• आप तत्वों के कोड लक्ष्यीकरण को सक्षम करने के लिए कक्षाओं का उपयोग करके, किसी भी आईडी के साथ समान मार्कअप के साथ 8 कॉलम का उपयोग कर सकते हैं। यहां एक लाभ यह है कि लिंक की वास्तविक संख्या के साथ-साथ पाठ, इमेज इत्यादि भी भिन्न हो सकती हैं। इसे या तो दस्तावेज़ में धक्का दिया जा सकता है या अधिक पाने के लिए AJAX का उपयोग किया जा सकता है।
• मेरी समीक्षा की सादगी के लिए, मुझे लगता है कि आपके द्वारा संकेतित किए गए केवल 5 "समूह" हैं। कोड लिंक क्लाइंट साइड से या सर्वर से, उन तक की सरणी में अतिरिक्त लिंक जोड़े जा सकते हैं।
• थंबनेल में हार्ड कोडित सामग्री की बजाय आप स्क्रिप्ट से इंजेक्शन कर रहे हैं, स्क्रिप्ट में उन मानों को कड़ी मेहनत कर रहे हैं। इसे बनाए रखना मुश्किल होगा।

कॉलम मार्कअप उदाहरण आपके आधार पर: नोट कोई आईडी यहां नहीं है। प्रत्येक का एक नाम के साथ 'एक' टैग और data-thing=' करने के लिए एक वर्ग:

<div class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
    <div class="thumbnail"> 
     <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
     <div class="caption"> 
     <h3 class="thumbnail-head text-center">Text title, label, etc</h3> 
     <p class="thumbnail-desc text-center">descritpion here</p> 
     <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
     </div> 
    </div> 
    </div> 

लिंक, चीजों की एक जोड़ी गयी। नाम के द्वारा जावास्क्रिप्ट ऑब्जेक्ट सरणी को लक्षित करने के लिए हम इस thing का उपयोग करेंगे (उन्हें देखें)।

<ul class="nav nav-pills"> 
    <li role="presentation"><a id="anime1" class="mylinks" data-thing="grout" href="#">Grouting</a></li> 
    <li role="presentation"><a id="anime2" class="mylinks" data-thing="ground" href="#">Ground Improvements</a></li> 
    <li role="presentation"><a id="anime3" class="mylinks" data-thing="earth" href="#">Earth Retention</a></li> 
    <li role="presentation"><a id="anime4" class="mylinks" data-thing="struct" href="#">Structural Support</a></li> 
    <li role="presentation"><a id="anime5" class="mylinks" data-thing="tech" href="#">Additional Technologies</a></li> 
</ul> 

ध्यान दें कि इन वस्तुओं को भी ऑब्जेक्ट से इंजेक्शन दिया जा सकता है।

यहां ऑब्जेक्ट है। मैंने इसे "myApp" के साथ रखा है। इस ऑब्जेक्ट में आप डेटा के साथ-साथ कुछ फ़ंक्शंस का उपयोग कर सकते हैं। पूरे ऑनलाइन टिप्पणियां देखें।

// create my namespace, use any preexisting namespace by that name. 
var myApp = myApp || {}; 

हमारे नाम स्थान में डेटा जोड़ें

// This is the actual data object, it has some defaults that I use 
myApp.loadObject = { 
    defaultActiveLink: "grout", 
    animateHideDelay: 500, 
    animateShowDelay: 500, 
    defaultColumnCount: 8, 
    // array of "things" that we process (by name) 
    things: [{ 
    name: "grout",// used to lookup 
    linkText: "Grouting",// link text (if we wanted to inject it) 
    // array of links in THIS thing - we use these 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/city', 
     "alt": "City", 
     "background": 'url(http://lorempixel.com/140/100/city)', 
     "headtext": 'Grouting0!', 
     "paragraphtext": 'Grouting 0 retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/city', 
     "alt": "City", 
     "background": 'url(http://lorempixel.com/140/100/city)', 
     "headtext": 'Grouting 1!', 
     "paragraphtext": 'Grouting1 retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/city', 
     "alt": "City", 
     "background": 'url(http://lorempixel.com/140/100/city)', 
     "headtext": 'Grouting2!', 
     "paragraphtext": 'Grouting2 retention text will be displayed here!' 
    }] 
    }, { 
    name: "ground", 
    linkText: "Ground Improvements", 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/nature', 
     "alt": "Nature", 
     "background": 'url(http://lorempixel.com/140/100/nature)', 
     "headtext": 'Ground Improvements!', 
     "paragraphtext": 'Ground 1 retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/nature', 
     "alt": "Nature", 
     "background": 'url(http://lorempixel.com/140/100/nature)', 
     "headtext": 'Ground Improvements2!', 
     "paragraphtext": 'Improvements 2 retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/nature', 
     "alt": "Nature", 
     "background": 'url(http://lorempixel.com/140/100/nature)', 
     "headtext": 'Ground Improvements3!', 
     "paragraphtext": 'Ground 3 Improvements retention text will be displayed here!' 
    }] 
    }, { 
    name: "earth", 
    linkText: "Earth Retention", 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/abstract', 
     "alt": "Abstract", 
     "background": 'url(http://lorempixel.com/140/100/abstract)', 
     "headtext": 'Earth1!', 
     "paragraphtext": 'Earth text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/abstract', 
     "alt": "Abstract", 
     "background": 'url(http://lorempixel.com/140/100/abstract)', 
     "headtext": 'Mother Earth!', 
     "paragraphtext": 'Mother Earth text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/abstract', 
     "alt": "Abstract", 
     "background": 'url(http://lorempixel.com/140/100/abstract)', 
     "headtext": 'Earthy!', 
     "paragraphtext": 'Earthy retention text will be displayed here!' 
    }] 
    }, { 
    name: "struct", 
    linkText: "Structural Support", 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/cats', 
     "alt": "Cats", 
     "background": 'url(http://lorempixel.com/140/100/cats)', 
     "headtext": 'Stuctural!', 
     "paragraphtext": 'Structural retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/cats', 
     "alt": "Cats", 
     "background": 'url(http://lorempixel.com/140/100/cats)', 
     "headtext": 'Struct!', 
     "paragraphtext": 'Struct retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/cats', 
     "alt": "Cats", 
     "background": 'url(http://lorempixel.com/140/100/cats)', 
     "headtext": 'Struct Last!', 
     "paragraphtext": 'My Struct Last retention text will be displayed here!' 
    }] 
    }, { 
    name: "tech", 
    linkText: "Additional Technologies", 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/food', 
     "alt": "Foody", 
     "background": 'url(http://lorempixel.com/140/100/food)', 
     "headtext": 'Tech!', 
     "paragraphtext": 'Tech Tech Tech text will be displayed here!' 
    }] 
    }] 
}; 

हमारे नाम स्थान के लिए कुछ सामान्य कार्यों जोड़ें:

// some generic functions to process my "object" not all these are used so you could clip it down a bit 
myApp.arrayObj = { 
    indexOf: function(myArray, searchTerm, property) { 
    for (var i = 0; i < myArray.length; i++) { 
     if (myArray[i][property] === searchTerm) return i; 
    } 
    return -1; 
    }, 
    indexAllOf: function(myArray, searchTerm, property) { 
    var ai = []; 
    for (var i = 0; i < myArray.length; i++) { 
     if (myArray[i][property] === searchTerm) ai.push(i); 
    } 
    return ai; 
    }, 
    lookup: function(myArray, searchTerm, property, firstOnly) { 
    var found = []; 
    var i = myArray.length; 
    while (i--) { 
     if (myArray[i][property] === searchTerm) { 
     found.push(myArray[i]); 
     if (firstOnly) break; //if only the first 
     } 
    } 
    return found; 
    }, 
    lookupAll: function(myArray, searchTerm, property) { 
    return this.lookup(myArray, searchTerm, property, false); 
    }, 
    remove: function(myArray, searchTerm, property, firstOnly) { 
    for (var i = myArray.length - 1; i >= 0; i--) { 
     if (myArray[i][property] === searchTerm) { 
     myArray.splice(i, 1); 
     if (firstOnly) break; //if only the first term has to be removed 
     } 
    } 
    } 
}; 

हमारे नाम स्थान (अच्छी तरह से केवल एक के लिए कुछ कस्टम कार्यों जोड़ें ...)

// custom functions 
myApp.func = { 
    /* activate the default specified by name */ 
    setDefault: function() { 
    var activeDefault = myApp.loadObject.defaultActiveLink; 
    var defaultIndex = myApp.arrayObj.indexOf(myApp.loadObject.things, activeDefault, "name"); 
    defaultIndex = !!activeDefault ? defaultIndex : 0; 
    $('.nav-pills').find('.mylinks').eq(defaultIndex).trigger('click'); 
    } 
}; 

मानक jQuery सामग्री, यह एक कस्टम फ़ंक्शन हो जिसे हम भी कॉल कर सकते हैं। यह मूलतः क्या करता है अपने सभी कोड किया:

// process on click, injecting the appropriate text 
$('.nav-pills').on('click', '.mylinks', function() { 
    // hide using the default hide delay in the object 
    $('.columns').hide(myApp.loadObject.animateHideDelay); 
    var thingtype = $(this).data('thing');// added to the link 
    var thing = myApp.arrayObj.lookup(myApp.loadObject.things, thingtype, "name", true);//lookup by name 
    var columns = $('.columns');// all the columns 
    // process the links,showing them 
    $.each(thing[0].columnData, function(index, item) { 
    // cache to not do multiple DOM searches 
    var tn = columns.eq(index).find('.thumbnail'); 
    var cap = tn.find('.caption'); 
    tn.find('img.img-thumbnail').attr('src', item.src).attr('alt', item.alt).prepend('background-image', item.background); 
    cap.find('h3.thumbnail-head').text(item.headtext); 
    cap.find('p.thumbnail-desc').text(item.paragraphtext); 
    // show this one 
    $('.columns').eq(index).show(myApp.loadObject.animateShowDelay); 
    }); 
}); 

$(function() { 
    // activate the default specified by name 
    myApp.func.setDefault(); 
}); 

Answer 2

खैर, सबसे सरल एक

$("#anime1").click(); 

दस्तावेज़ में तैयार

बंधन घटनाओं के बाद होगा, लेकिन इस सामग्री चेतन होगा।

Answer 3

अज्ञात फ़ंक्शन को ले जाएं जब #anime1 वैश्विक दायरे में क्लिक किया गया है और इसका नाम दें। फिर इसे दस्तावेज़ तैयार पर कॉल करें।

$(function(){ 

    $('#anime1').click(loadAnime1); 

    // Other click handlers 

}); 

function loadAnime1(){ 
    $('.column').each(function(){ 
    $(this).hide(500); 
    }); 
    $('.columns').each(function(){ 
    $(this).show(500); 

    $('#col1 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col1 h3').text('Grouting!'); 
    $('#col1 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col2 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col2 h3').text('Grouting!'); 
    $('#col2 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col3 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col3 h3').text('Grouting!'); 
    $('#col3 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col4 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col4 h3').text('Grouting!'); 
    $('#col4 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col5 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col5 h3').text('Grouting!'); 
    $('#col5 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col6 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col6 h3').text('Grouting!'); 
    $('#col6 p:first').text('Grouting retention text will be displayed here!'); 
    }); 
} 

$(document).ready(function() { 
    loadAnime1(); 
})