2009-04-28 8 views
0

J'ai essayé de trouver un exemple de simialr et de l'utiliser pour répondre à mon problème, mais je n'arrive pas à le faire fonctionner, alors excuses si cela ressemble à d'autres problèmes. Fondamentalement, j'utilise le système CMS de Site Manager de Terminal Four pour construire mes sites Web. Cet outil vous permet de générer des éléments de navigation à utiliser sur votre site.Ajout d'une ancre aux URL générées

J'ai besoin d'ajouter un bit personnalisé de JS pour ajouter à ces liens une ancre.

Les liens générés sont similaires à ceci:

<ul id="tab-menu"> 
<li><a href="/section/page">test link, can i rewrite and add an anchor!!!</a></li> 
</ul> 

je peux modifier les propriétés css du lien, mais je ne peux pas comprendre comment ajouter un point d'ancrage.

Le JQuery J'utilise est la suivante:

<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    // everything goes here 

    $("#tab-menu").children("li").each(function() { 
     $(this).children("a").css({color:"red"}); 

     }); 

    }); 
</script> 

Merci à l'avance pour toute aide.

Paddy

+0

Bonne question, mais comment fait-il sans jQuery? – JohnK

Répondre

1

Une bonne méthode basée sur jQuery est d'utiliser la méthode .get (index) pour accéder à l'élément DOM brut au sein de votre chaque() fonction. Cela vous donne alors accès à l'objet lien JavaScript, qui possède une propriété appelée 'hash' qui représente la partie d'ancrage d'une URL. Donc, modifiant légèrement votre code:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    // everything goes here 

     $("#tab-menu").children("li").children("a").each(function() { 
      $(this).css({color:"red"}).get(0).hash = "boom"; 
     }); 

    }); 

Changerait tous les liens "#tab_menu li" au rouge, et attacher "#boom" à la fin.

Espérons que cela aide!

+0

Merci, cela fonctionne parfaitement. Paddy –

+0

Cool. Comment pourrait-on comment le faire sans jQuery? – JohnK

0

Je peux maintenant cibler le code html en utilisant ce qui suit:

$(this).children("a").html("it works"); 

I comme supposé que:

$(this).children("a").href("something"); 

éditerait le href mais je me trompe.

Paddy

+0

Utilisez quelque chose comme $ (this) .children ("a"). Attr ("href", "quelque chose") et tout va bien. – moff

0

Je ne suis pas sûr de la réponse, je force d'essayer

$("#tab-menu").children("li").children("a").each(function() { 
       // $(this).css({color:"red"}).get(0).hash = "boom"; 
      var temp_url = $(this).href +'#an_anchor';//or var temp_url = $(this).attr('href'); 
      $(this).attr('href', temp_url); 
    });