javascript ne fonctionnait pas avec HTML5

Question

J'ai commencé à implémenter de nouvelles fonctionnalités html5 (standards, rien d'extraordinaire) dans mon projet. Juste l'en-tête standard, pied de page, de côté, ect. Pour une raison quelconque, un code javascript que j'ai utilisé sur un projet passé ne fonctionne pas maintenant et je ne peux pas comprendre quel est le problème.

J'ai comparé le code (html/javascript) avec mon nouveau projet et le projet passé (avec javascript fonctionnant) et je ne vois aucune différence. La seule chose que je peux penser est le changement dans les versions html. Par ailleurs Im Im essayant d'implémenter un script qui met en évidence un lien en cours à partir d'un menu

Il est supposé utiliser javascript pour ajouter/supprimer un ".selected" code les balises d'ancrage dans le menu et se rapporte à la page en cours et le lien.

est ici le code:

<aside> 
     <section> 
      <Strong>Quick Links</strong> 
       <menu id="side_menu"> 
        <ul> 
         <li><a href="application.php">Sign Up</a></li> 
         <li><a href="testimonials.php">Testimonials</a></li> 
         <li><a href="diploma.php">The Process</a></li> 
         <li><a href="diploma.php">Course Listings</a></li> 
         <li><a href="about.php">American High School</a></li> 
        </ul> 
       </menu> 

     <script> 
      $(document).ready(function() { 
       var loc = window.location.href; // The URL of the page we're looking at 
       $('#side_menu a').each(function() { 
        if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor 
          $(this).addClass('selected'); // Mark it as selected 
        } 
       }); 
      }); 
     </script> 

     </section> 
</aside> 

Voici le lien vers le site here (panneau latéral)

Je vous serais reconnaissant toute aide sur cette question. J'ai passé des heures à essayer de comprendre cela. Merci pour toute aide.

gdinari

Answer 1

Un problème est que vous essayez d'utiliser Prototype avant que vous avez inclus ce. Déplacez votre balise de script pour js/prototype.js au-dessus de votre balise de script pour js/drop-o-matic.js.

Si vous utilisez un débogueur (Outils de développement de Chrome, Firebug pour Firefox, Script Debugger pour IE, ...) il devrait vous le dire. Dans ce cas, par exemple, Outils de développement de Chrome m'a montré Uncaught TypeError: Object #<an HTMLDocument> has no method 'observe', qui m'a immédiatement indiqué dans la bonne direction   — votre fonction DOM chargé n'est pas exécuté parce que vous essayez de le brancher avant document.observe est ajouté par Prototype. Après la correction de ce qui précède, la console a indiqué Uncaught TypeError: Object #<an HTMLDocument> has no method 'ready'. Et c'est parce que vous essayez d'utiliser le code jQuery sans inclure jQuery:

$(document).ready(function() { 
    var loc = window.location.href; // The URL of the page we're looking at 
    $('aside li a').each(function() { 
     if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor 
      $(this).addClass('selected'); // Mark it as selected 
     } 
    }); 
}); 

Vous peut utiliser jQuery ainsi que Prototype si vous voulez, mais s'il est juste pour cet extrait, je le convertir en code prototype à la place:

document.observe("dom:loaded", function() { 
    var loc = window.location.href; // The URL of the page we're looking at 
    $$('aside li a').each(function(link) { 
     if (loc.indexOf(link.href) !== -1) { // If the URL contains the href of the anchor 
      link.addClassName('selected'); // Mark it as selected 
     } 
    }); 
}); 

Si vous utilisez le code jQuery ailleurs, vous aurez envie d'inclure jQuery et utiliser jQuery.noConflict, qui permet Prototype de garder le symbole $ (vous devez utiliser jQuery au lieu où vous voulez jQuery de ou utilisez la fonction de chargement jQuery tion en tant que fonction de cadrage).