Семантический пользовательский интерфейс: табличный не работает

Я работаю с Semantic UI, и у меня возникают проблемы с их Вкладки. Первая вкладка отображается как активная вкладка, но при нажатии на вторую вкладку вкладка не меняется. Их пример можно увидеть в разделе "Прикреплено" здесь. Вы можете увидеть мой пример ниже. Я считаю, что он настроен правильно. Я также настроил этот JSFiddle с включенными Semantic и jQuery. Пожалуйста, дай мне знать, если возникнут какие-либо вопросы.

<div class="ui top attached tabular menu">
    <a class="active item">One</a>
    <a class="item">Two</a>
</div>
<div class="ui bottom attached segment">
    <h4>Product Name</h4>
    <p>Here is the description</p>
</div>

html jquery semantic-ui
person Max Baldwin    schedule 07.07.2014    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Вам нужно использовать JavaScript для подключения вкладок.

Я изменил вашу скрипку:

$(document).ready(function(){
    $('.tabular.menu .item').tab({history:false});
});

http://jsfiddle.net/zu4kG/5/

Также см. этот пост в блоге: http://patrickgawron.com/wp/semantic-ui/

Обратите внимание, что я также добавил jquery.address.js

person Kirill Chatrov    schedule 07.07.2014
comment
Это определенно решение этой проблемы, но я обнаружил, что существует много разных решений этой проблемы. Мне было интересно, не упустил ли я что-то, что заставило бы Semantic выполнять это действие автоматически, но похоже, что они пытаются дать вам возможность создавать свои собственные действия. - person Max Baldwin; 08.07.2014
comment
@MaxBaldwin Я думаю, вы неправильно понимаете слово семантика. Это не означает отсутствие JavaScript, это означает, что HTML не используется неправильно по сравнению с тем, как он был задуман, и что он содержит (дополнительную) информацию, которую можно использовать на компьютере. - person Juan Mendes; 08.07.2014
comment
@JuanMendes Да, я понимаю, что ты имеешь в виду. Некоторые функции javascript включены в файл semantic.js. Я не знал, не пропустил ли я селектор, который мог бы быть включен в этот файл. - person Max Baldwin; 08.07.2014

arrow_upward
3
arrow_downward

Проблема, которую я надеялся решить, заключалась в том, что я думал, что упускаю что-то, что вызовет действие, встроенное в Semantic. Похоже, что Semantic просто хочет дать разработчику возможность создавать свои собственные действия на этих вкладках. Они делают это, предоставляя структуру и некоторые возможные переходы для ваших действий. По сути, существует множество различных решений того, как это действие может функционировать. Ниже я представил очень простое решение с использованием классов Semantic и jQuery. Вот JSFiddle.

$('.item').click(function(){
   $('.active').removeClass('active');
   $(this).addClass('active');
});
person Max Baldwin    schedule 08.07.2014
comment
Небольшое улучшение :-) $(this).siblings('.active').removeClass('active'); - person Marius Engen Haugen; 11.04.2016

arrow_upward
3
arrow_downward

Получил ту же проблему, и этот ответ помог указать правильное направление. Моя проблема заключалась в том, что первая вкладка не была видна с самого начала, поэтому вам нужно было щелкнуть хотя бы одну вкладку.

<div class="ui bottom attached active tab segment" data-tab="first">
    <h4>Product Name</h4>
    <p>Here is the description</p>
</div>

Добавление «активного» класса в HTML-структуру содержимого вкладки исправило это.

person ddresch    schedule 08.11.2014
comment
Это лучший ответ для меня, это информация, которую они упустили в своей документации! - person ; 06.03.2015
comment
Люблю этот ответ. Это объясняет проблему, которая у меня была. Спасибо. - person Sauleil; 12.09.2017
comment
В нашем случае вкладки были активированы с помощью .tab() до того, как условие видимости было разрешено. - person J. Unkrass; 07.10.2019