Menu not working for semantic UI like Example Code

I am a beginner at web development and I am now using semantic-ui framework for my font-end development.I have tried the sample code for the first example menu at this link.

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

But my menu don't change active state on click like this.I have tried $("..").menu() method and it shows $(..).menu is not a function.I wonder if you could help me please.Shall I have to write my custom Javascript code to change active state on click or on hover. Here is my code

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

Solution

Use this:

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