2015-10-09 6 views
3

Я начинающий разработчик в веб-разработке, и теперь я использую семантику-интерфейс для моей разработки на основе шрифтов. Я попробовал образец кода для первого примера меню по этой ссылке.Меню, не работающее для семантического интерфейса, например Пример кода

http://semantic-ui.com/collections/menu.html

Но мое меню не меняются активное состояние по щелчку как this.I попробовал $ (".."). Метод меню(), и это показывает $ (..). Меню не функция. Интересно, можете ли вы мне помочь. Хорошо, мне нужно написать свой код Javascript, чтобы изменить активное состояние при нажатии или при наведении. Вот мой код

<!DOCTYPE html> 
<html lang=""> 
<head> 


    <script src="jquery.js"></script> 
<link rel="stylesheet" type="text/css" href="Semantic-UI-master/dist/semantic.min.css"> 


<script src="Semantic-UI-master/dist/semantic.min.js"></script> 

<style> 

    </style> 
</head> 
<div class="ui three item menu"> 
    <a class="item">Editorials</a> 
    <a class="item">Reviews</a> 
    <a class="item active">Upcoming Events</a> 
</div> 
</html> 

ответ

6

Используйте это:

$('.ui .item').on('click', function() { 
    $('.ui .item').removeClass('active'); 
    $(this).addClass('active'); 
}); 
+0

Это работало для меня. Не могли бы вы объяснить, почему это происходит? – Shashanth

+0

Это странно. Когда семантические корабли это 'js' и' css', не все функциональности работают из коробки? –

+0

Это имело бы смысл ... в каком-то аспекте. Но что, если на вашей странице есть 2 или 10 меню? Тогда вам придется разделить их на разные классы. Поэтому, чтобы сделать работу рамок для всех пользователей, Sematic должен был бы настроить пользовательское меню, нажав эту кнопку меню. –

0

Хотя непосредственно не отвечая на первый вопрос, я думаю, что стоит отметить, что любое выпадающее меню в стиле будет зависеть от ниспадающего JavaScript. Так, например, следующее меню:

<div class="ui top attached menu"> 
    <div class="ui dropdown icon item"> 
    <i class="wrench icon"></i> 
    <div class="menu"> 
     <div class="item"> 
     item text here... 
     </div> 
    </div> 
    </div> 
</div> 

Нужно будет сопровождаться:

$('.ui.dropdown').dropdown(); 
Смежные вопросы