À l'aide de l'onglet contrôle de la sémantique de l'interface utilisateur

Je suis en train de construire un site web à l'aide de la sémantique de l'interface utilisateur. J'aime beaucoup de ce que je vois. Cependant, je suis en train de créer un contrôle onglet. Dans une tentative pour ce faire, j'ai pensé que j'ai attrapé le code trouvé sur la page d'aperçu. Cependant, comme mon jsfiddle montre, l'onglet comportement ne fonctionne pas correctement. Voici un échantillon de mon onglet code:

<div class="row">
  <div class="ui active tab segment" data-tab="first">First</div>
  <div class="ui tab segment" data-tab="second">Second</div>
  <div class="ui tab segment" data-tab="third">Third</div>

  <div class="ui pointing secondary demo menu">
    <a class="active red item" data-tab="first">One</a>
    <a class="blue item" data-tab="second">Two</a>
    <a class="green item" data-tab="third">Three</a>
  </div>
</div>

Ce que je fais mal?

OriginalL'auteur user3284007 | 2014-02-14

  1. 13

    J'ai également été à la recherche dans ce. Il semble que l'onglet plugin n'est pas encore "libérés" ou encore documentées. Voir https://github.com/Semantic-Org/Semantic-UI/issues/209.

    Il y a un bon article de blog couvrant les onglets ici: http://patrickgawron.com/wp/semantic-ui/

    Votre problème principal est que vous devez utiliser javascript pour câbler les onglets. J'ai ajouté les dépendances et ce code pour appeler l'onglet plugin:

    $(document).ready(function(){
    $('.demo.menu .item').tab();
});

    http://jsfiddle.net/WinstonF/d93af/1/

    Mise à jour:

    Si vous passez { history: false } à l'onglet de fonction, alors vous n'avez pas besoin de jquery.adresse.

    http://jsfiddle.net/WinstonF/d93af/2/

    Exemple de travail

    http://jsfiddle.net/8ap576p3/

    Upvote pour { history: false }, c'est ce qui me manquait.
    Cette méthode ne semble pas être fonctionne plus. Toutes les solutions inclure jQuery Adress.js mais il ne marche pas encore résoudre le porlbem. Il fonctionne sur leur page de documentation. Je ne sais pas comment semantic-ui.com/modules/tab.html

    OriginalL'auteur Winston Fassett

  2. 0

    J'ai pensé que je voudrais juste poser une option pour ceux qui sont encore des questions:

    J'ai un site web de base avec 4 éléments dans le menu. Voici un exemple de code HTML:

    <div class="ui pointing menu">
    <div class="ui container">
        <a href="/route1" class="header item">
            TEXT
        </a>
        <a href="/route2" class="item">TEXT</a>
        <a href="/route3" class="item">TEXT</a>
        <a href="/route4" class="item">TEXT</a>
    </div>
</div>

    Ci-dessous présent dans le corps de l'HTML, j'ai un script qui va de travers et vérifie le parcours de l'utilisateur est sur et procède ensuite à faire que d'onglet dans le menu de l'actif. Cette solution ne repose pas sur l'utilisateur en cliquant sur l'élément de menu qui est très pratique.

    <script>
    //get the current path the user is on and extract the route name
    var path = window.location.pathname.split("/").pop();

    //loop through each item
    $('.pointing.menu .item').each(function(i, obj){

        //extract the href (route) for the current item
        var href = obj.href.split("/").pop();

        //if the href and the path are the same, make that 
        //item the active tab
        if (href === path){
            $(this).addClass("active");
        }
    });
</script>

    J'ai essayé de jouer avec certains des autres réponses que j'ai trouvées sur internet et ne pouvaient pas obtenir de leur travail.

    Espère que cette aide.

    OriginalL'auteur Michael Hall

  3. 0

    Pour ce que ça vaut, ça ne fonctionnait pas pour moi, même en utilisant leur code d'exemple. Il s'avère qu'il y est un problème avec le minifiés fichier, donc si vous mettez à jour 

    <script src="semantic/dist/semantic.js"></script>

    de ne plus l'utilisateur 

    semantic.min.js

    mais au lieu de cela, juste semantic.js il semble fonctionner.

    Pas idéal, mais vont onglets de travail

    OriginalL'auteur IonicBurger