Использование управления вкладкой в ​​semantic-ui

Question

Я пытаюсь создать веб-сайт, используя semantic-ui. Мне нравится то, что я вижу. Тем не менее, я пытаюсь создать элемент управления вкладкой. В попытке сделать это я подумал, что захватил код, найденный на обзорной странице. Однако, как и мой jsfiddle shows, поведение вкладки работает неправильно. Вот пример кода моей вкладки:

<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> 

Что я делаю неправильно?

Answer 1

Я также изучал это. Кажется, плагин tab еще не «выпущен» или еще не задокументирован. См. https://github.com/Semantic-Org/Semantic-UI/issues/209.

Там хороший блог статья охватывает вкладки здесь: http://patrickgawron.com/wp/semantic-ui/

Ваша главная проблема заключалась в том, что вы должны использовать JavaScript, чтобы телеграфировать вкладки. Я добавил зависимостей и этот код для вызова вкладки плагин:

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

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

Update:

Если передать { history: false } функции вкладки, то вам не нужно JQuery. адрес.

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

Рабочий пример

http://jsfiddle.net/8ap576p3/

Answer 2

Я думал, я бы просто бросить в вариант для тех, кто еще есть вопросы,:

У меня есть основной сайт с 4-х предметов в меню. Вот пример 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> 

Ниже этого в теле HTML У меня есть сценарий, который проходит через и проверяет, какой маршрут пользователь находится на, а затем переходит сделать эту вкладку в меню активного один. Это решение не зависит от того, как пользователь нажимает на элемент меню, который очень удобен.

<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> 

Я попытался поиграть с некоторыми другими ответами, которые я нашел в Интернете, и не мог заставить их работать.

Надеюсь, это поможет.