Dev Faq
0
votes

Comment convertir chaque en-tête en un permalink en utilisant jQuery / javascript

J'ai une page contenant de nombreux en-têtes. J'aimerais convertir chaque en-tête en un lien permanent à l'aide de jQuery / JavaScript.

code HTML: p>

p> 

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <h3 id="Heading1">1<sup>st</sup> Heading</h3>
  <div class="borderedPara">
    1<sup>st</sup> Paragraph Content
  </div>
  <h2 id="Heading2">2<sup>nd</sup> Heading</h2>
  <div class="borderedPara">
    2<sup>nd</sup> Paragraph
  </div>
  <h3 id="Heading3">3<sup>rd</sup> Heading</h3>
  <div class="borderedPara">
    3<sup>rd</sup> Paragraph
  </div>
  <a href="#Heading4">
    <div id="Heading4">4<sup>th</sup> Heading</div>
  </a>
  <div class="borderedPara">
    4<sup>th</sup> Paragraph
  </div>
</body>

</html>

0 commentaires

3 Réponses :

0
votes

Vous devez utiliser RemplacerWith de JQuery API

Si vous souhaitez convertir une balise d'en-tête en lien (comme vous l'avez fait pour 4th en-tête), xxx

lien vers jsfiddle

Si vous souhaitez garder vos balises de tête et votre en-tête surround avec une balise de liaison xxx

lien vers jsfiddle

4 commentaires

Les ancres ne fonctionnent pas vraiment comme des permaliens. Ils ne font pas défiler la page pour apporter la position cliquée sur le haut de la page. (HREF: '#' doit contenir l'ID du titre respectif E.g.: Href: "# # heading1")

@Yourpalnurav a mis à jour la réponse et jsfiddle.

@Yourpalnurav, génial. On conseille, utilisez une balise d'ancrage avec un style personnalisé pour les faire ressembler à une en-tête ainsi que de travailler comme hyperlien aussi. Ou vous pouvez faire quelque chose de créatif comme sur Cette page

Jekyll << C'est la page que je voulais imiter . Je voulais la mettre en œuvre sans avoir besoin de Jekyll

2
votes

Vous pouvez utiliser .wrapinner code> ...

P> 

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <h3 id="Heading1">1<sup>st</sup> Heading</h3>
  <div class="borderedPara">
    1<sup>st</sup> Paragraph Content
  </div>
  <h2 id="Heading2">2<sup>nd</sup> Heading</h2>
  <div class="borderedPara">
    2<sup>nd</sup> Paragraph
  </div>
  <h3 id="Heading3">3<sup>rd</sup> Heading</h3>
  <div class="borderedPara">
    3<sup>rd</sup> Paragraph
  </div>
  <a href="#Heading4">
    <div id="Heading4">4<sup>th</sup> Heading</div>
  </a>
  <div class="borderedPara">
    4<sup>th</sup> Paragraph
  </div>
</body>

</html>

4 commentaires

$ ('h3'). Chacun (fonction () {} convertine uniquement les balises

en permaliens. Existe-t-il un moyen de convertir plusieurs balises de rubrique à l'aide du même code? Quelque chose comme $ (H3 ',' H2 ',' H1 ',' H4 ',' H5 '). Chacun (fonction () {}

Oui. Exactement ça.

Merci pour votre solution. Ça fait bien ce que j'ai voulu.

Sinon, vous pouvez utiliser $ (': en-tête') qui sélectionnera tous les en-têtes pour vous en tant que sélecteur sténographique.

-1
votes

Si vous utilisez BOOTSTRAP 4, il existe une classe pour les balises de tête comme .h6, .h5 jusqu'à .h1 , l'utiliser serait facile avec le Tag d'ancrage xxx

1 commentaires

Ce n'est pas une solution à la question de l'OP. OP a demandé une solution de conversion à l'aide de JQuery ou JavaScript.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO