Dev Faq
12
votes

Comment obtenir un lien pour ouvrir un onglet spécifique sur une page?

Je travaille sur un site pour un client qui a piloté JQuery Contenu.

La liaison à la bonne page est suffisamment facile, mais le défi consiste à s'ouvrir à l'onglet correct lorsque vous arrivez là-bas. Sur la page À propos du rouleau sur le bas et cliquez sur le déplacement Icône forte> (celui avec le camion). Cela vous emmène au Déplacer la page IT . Cela fonctionne bien, mais j'aimerais que cela puisse ouvrir l'onglet Strong> Specialty Strong>. p>

Voici le code qui relie la page: P> 

$(document).ready(function() {
/* this is for the tabbed content */
$("a.tab").click(function( evt ) {
    evt.preventDefault();
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(".content").slideUp();

    var content_show = $(this).attr("id");
    $("#" + content_show + '-content').slideDown();
});

0 commentaires

5 Réponses :

0
votes

J'ai besoin de code JS pour gérer un hashpart. Cela pourrait sembler un peu comme ça. XXX

Mettez ceci après avoir attaché votre gestionnaire. Maintenant, votre lien devrait fonctionner.

5 commentaires

Marek, merci d'avoir répondu. Est-ce que cela va sur la page de liaison ou la page de destination ou les deux?

Ok, alors vous avez ST H comme ça maintenant: Pourquoi nous? substitut Href ici à href = "why_us". Maintenant URL À propos_US.HTML # WHY_US doit ouvrir votre onglet. J'espère que cela fonctionne.

Marek. Nous nous rapprochons. J'ai ajouté le code comme vous l'avez dirigé. Je l'ai ajouté aux objets lourds en mouvement. Il va à la bonne page et indique le contenu correct, mais l'onglet est toujours réglé sur le premier (résidentiel) au lieu de la spécialité.

De plus, je voudrais changer la note à +1 mais vous devrez modifier la partie de réponse pour permettre cela. Merci.

Si vous modifiez le lien.Trigger à un lien.Click () ... cela ne résout pas le problème avec l'onglet ne pas être défini?

1
votes

J'ai récemment essayé de construire mes propres onglets. J'ai changé le code pour répondre à vos besoins, mais je ne sais pas si cela fonctionne:

Assurez-vous que l'ID de votre lien est le Identique que ce que vous mettez après le # em> p> xxx pré>

espère que cela aide! p>

edit: strong> p >

Le code ci-dessous consiste à définir le lien d'onglet sur Active (voir Commentaire) en fonction de votre structure. P> 

    $(".tabs a").each(function(i){ // Loop through all the links
        if(curtab == $(this).attr("id")){ // Compare the value from the url with the id
            $(this).addClass("active"); // If equal add class active
        }
    });

3 commentaires

Rick, nous nous rapprochons. L'onglet ne sélectionne toujours pas correctement. Voici la page de lancement: theidapeople.com/projectpath/movingImplied/about_us.htmllled/a > En bas, cliquez sur le clavier de piano. Il va à cette page theidapeople.com/projectpath/movingSImplied/.../a> et montre le contenu correct, mais ne s'ouvre pas à l'onglet correct.

Lorsque je regarde votre code source, je vois que vos liens d'onglet sont conservés dans une UL avec les onglets de la classe ". Dans la jQuery, je ne peux pas sembler trouver où vous comparez l'ID du lien avec l'ID de l'URL. J'ai ajouté du code à ma réponse. Vous pourriez essayer ça. J'ai également remarqué que le contenu de l'onglet commercial est affiché sous le contenu spécialisé après avoir cliqué sur le piano sur la page environ_us. Vous voudrez peut-être examiner cela aussi. Je vérifie à nouveau demain. Le code peut être un peu éteint depuis sa quasi-totalité de 1 du matin;) J'espère que vous avez l'idée et que vous avez plus encore sur votre chemin.

Pour obtenir Curtab Vous pouvez utiliser VAR CORTBAB = DOCUMENT.LOCATION.HASH . Ont ajouté ma réponse en cas d'onglets bootstrap

8
votes

Ceci est facilement implémenté à l'aide des plug-ins jQuery d'Ariel Flesler avec le widget Standard JQuery UI Tabs:

2 commentaires

Merci de passer cela le long. C'est la fonctionnalité exacte dont j'avais besoin.

Vos liens sont brisés :(

0
votes 
$('.LinkSelector').click(function(){
   $( "#tabs" ).tabs("select", "#tabs-1" );
  });
above code is also helpful.
0 commentaires
0
votes

Améliorer la réponse de Rik, c'est ainsi que je l'ai fait pour mon projet à l'aide de Bootstrap 4.0 et JS.

JS H2> 
 <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#info">Info</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#note">Note</a>
    </li>
 </ul>

0 commentaires

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier