Dev Faq
-1
votes

Comment appeler une fonction avec OnClick à JQuery?

J'ai utilisé ce code pour afficher le contenu de l'onglets avec naviguer dans URL:

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabbed-content">
  <ul class="tab">
    <li class="nav-one"><a href="#step1" class="current">Level1</a></li>
    <li class="nav-two"><a href="#step2">Level2</a> </li>
    <li class="nav-three"><a href="#step3">Level3</a></li>
  </ul>
  <div class="list-wrap">
    <ul id="step1" class="me">content Level 1</ul>
    <ul id="step2" class="hide me">content Level 2</ul>
    <ul id="step3" class="hide me">content Level 3</ul>
  </div>
</div>
<a href="#step2" class="newlink">Go To Level 2 :)</a>

0 commentaires

3 Réponses :

0
votes

Utilisez quelque chose comme ceci: 

$('.newlink').on('click', function (e){
  e.preventDefault();
  $('#tabbed-content ul li a[href="#step2"]').click();
})

3 commentaires

Bien sûr, utilisez quelque chose comme ça, mais pourquoi fonctionne-t-il? Pourquoi ne fonctionne pas l'approche de l'OP? Comment est-ce différent de ce que fait l'OP? Une bonne réponse Stackoverflow devrait faire plus que résoudre le problème immédiat du questionneur - il devrait être instructif afin qu'il aide les autres personnes à l'avenir qui ont un problème similaire (mais pas exactement le même). Voir Comment répondre

@Anish K. Merci pour votre solution. J'ai changé un peu votre code sur un [href = "# step2"] (juste ajouter #) et c'est bien ça marche bien. Très belle solution.

@Yasintaqizade content que cela ait aidé. Aussi, édité comme suggéré.

1
votes

Alors, c'était en fait une chose très compliquée! Cela peut ne pas être un parfait, 100% de ce que vous voulez répondre em> - mais il devrait expliquer essentiellement ce qui se passe et vous mènera dans la bonne direction.

Tout d'abord, vous liez $. Organictabs () Code> à Just # Tabedd-Contenu code>. Eh bien, le code> que vous avez ajouté est en dehors du contexte de l'élément lié. Em> i Mettez le nouveau lien dans un

code> et lui a donné l'identifiant de liens code>, puis a formulé la mise à jour suivante sur la jQuery ... p> xxx pré>

Suivant, votre définition dans Demandez à votre lien avec votre corps à onglets, vous devez déplacer sa portée vers le haut dans la portée du corps à onglets ... p> xxx pré>

it Fonctionne! em> strong> Le style est certainement désactivé, mais c'est clairement un projet massif et tous les petits bizarres peuvent être parfaitement réajustés si facilement. Il se peut que $. Organictabs () code> n'est plus si organique ni frais et pourrait aller pour une nouvelle réingotionnelle! P>

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabbed-content">
  <ul class="tab">
    <li class="nav-one"><a href="#step1" class="current">Level1</a></li>
    <li class="nav-two"><a href="#step2">Level2</a> </li>
    <li class="nav-three"><a href="#step3">Level3</a></li>
  </ul>
  <div class="list-wrap">
    <ul id="step1" class="me">content Level 1</ul>
    <ul id="step2" class="hide me">content Level 2</ul>
    <ul id="step3" class="hide me">content Level 3</ul>
  </div>

<div id="links">
<ul class="tab">
<li class="nav-two"><a href="#step2">Level2</a> </li>
</ul>
</div>

</div>

0 commentaires
0
votes

Vous pouvez également essayer de changer cette ligne: 

<a href="?tab=step2" class="newlink">Go To Level 2 :)</a>

2 commentaires

Bienvenue à! Cela ne rechargera pas complètement la page pour l'utilisateur et contourner la fonctionnalité JavaScript tout à fait?

Oui. Il se rechargera, mais cela est basé sur son code existant selon lequel il veut le faire et la corriger.

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