jquery - Semantic Ui Menu not working -

i trying work semantic ui menu.

but cannot work, ie when click items in menu, active state isn't changing. didn't find examples in web either.

html :

<div class="ui grid">         <div class="one wide row">             <div class="ui green menu">                 <a class="active item">                     <i class="home icon"></i> home                 </a>                 <a class="item">                     <i class="mail icon"></i> messages                 </a>                 <div class="right menu">                     <div class="item">                         <div class="ui transparent icon input">                             <input type="text" placeholder="search...">                             <i class="search link icon"></i>                         </div>                     </div>                 </div>             </div>         </div>     </div> 

js:

$(document).ready(function() {     $('.ui .green .menu').menu(); }); 

i have taken code snippet semantic-ui website.

some appreciated.

here's handler similar 1 on demo site

demo

screenshot:

  $('.ui.green.menu')     .on('click', '.item', function() {       if(!$(this).hasclass('dropdown')) {         $(this)           .addclass('active')           .siblings('.item')             .removeclass('active');       }     });