2013-03-12 3 views
0
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Demo</title> 
</head> 
<body> 
<a href="http://jquery.com/">jQuery</a> 
<script src="jquery-1.9.1.js"></script> 
<script> 
    $('.targetDiv').hide(); 
    $('.show').click(function() { 
    $('.targetDiv').hide(); 
    $('#div' + $(this).attr('target')).show(); 
    }); 

    $('.hide').click(function() { 
    $('#div' + $(this).attr('target')).hide(); 

    }); 
</script> 
<div class="buttons"> 
    <a class="show" target="1">Option 1</a> 
    <a class="show" target="2">Option 2</a> 
    <a class="show" target="3">Option 3</a> 
    <a class="show" target="4">Option 4</a> 
    <a class="hide" target="1">Close 1</a> 
    <a class="hide" target="2">Close 2</a> 
    <a class="hide" target="3">Close 3</a> 
    <a class="hide" target="4">Close 4</a> 
</div> 

<div id="div1" class="targetDiv">Lorum Ipsum 1</div> 
<div id="div2" class="targetDiv">Lorum Ipsum 2</div> 
<div id="div3" class="targetDiv">Lorum Ipsum 3</div> 
<div id="div4" class="targetDiv">Lorum Ipsum 4</div> 
</body> 
</html> 

Je ne suis pas sûr de ce que je fais mal ici. Cela fonctionne sur Jfiddle, mais cela ne fonctionnera pas correctement quand j'essaye de le faire comme tel.Nouveau sur Jquery. Qu'est-ce que je ne comprends pas avec ce code? Afficher/Masquer

  1. Enregistrement au format HTML.
  2. Enregistrement dans le même fichier.
  3. package de développement Downloaded from Jquery.com (enregistré comme jquery-1.9.1.js)

Toute information sera ajoutée sur demande. Dois-je enregistrer un fichier en HTML et l'autre en JS et les relier?

+5

Vous avez oublié le http://api.jquery.com/ready/ –

+1

vous devez envelopper tout le code dans '$ (function() {..}) ..' .In jsfiddlle il est déjà enveloppé quand vous sélectionnez le type comme onload ou onDOMReady – SRy

+0

@BradM Je serais paniquer si je voyais quelqu'un utilisant IE6: P – Doorknob

Répondre

1

Enveloppez votre code JavaScript (la substance entre les balises non jQuery script) avec ceci:

$(document).ready(function() { 
    // your code 
}); 
+0

Merci. Je voterais pour cela, mais j'ai besoin de 15 représentants au besoin. – user2158892

2

JavaScript fonctionne dès qu'il est chargé. Dans ce cas, il va charger avant que la page est prête. C'est pourquoi JavaScript fournit des événements pour nous informer lorsqu'une page est chargée.

jQuery nous donne de belles fonctions pour aider à cela:

$(document).ready(function() { 
    // CODE 
}); 

Vous verrez souvent cela aussi:

$(function() { 
    // CODE 
}); 

Ceci est un raccourci pour .ready(), mais est fondamentalement la même chose. Les deux attendent que le DOM soit chargé avant d'exécuter le code. La raison pour laquelle votre code fonctionne sur jsfiddle, c'est parce qu'il enveloppe le code automatiquement pour vous par défaut (regardez les options dans le menu sur la gauche, vous verrez onLoad comme l'option sélectionnée).

0

Bien sûr, si vous voulez coder sur le script jQuery, vous devez créer un autre jipt. celui que vous téléchargez est script jquery script api

Questions connexes