handle bootstrap list-group click
<p>I'm stuck with html/JS and have no idea how I should handle some events.
For example I have a list-group:</p>

<pre><code>&lt;div class="col-lg-3 col-md-3 col-sm-3 opciones"&gt;
   &lt;div class="list-group"&gt;
      &lt;a href="#" class="list-group-item active"&gt;
        Tokyo 
      &lt;/a&gt;  // barfoobarfoo
      &lt;a href="#" class="list-group-item"&gt;London&lt;/a&gt; // foo
      &lt;a href="#" class="list-group-item"&gt;Paris&lt;/a&gt;  // bar
      &lt;a href="#" class="list-group-item"&gt;Moscow&lt;/a&gt;  // foobar
      &lt;a href="#" class="list-group-item"&gt;NY&lt;/a&gt;   //foobarfoo
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>What I want to do is:</p>

<p>1)change active elements on click.</p>

<p>2)call JS function when element is clicked.
UPD:
So now I know that click events can be handled with JQuery thing.</p>

<p>What I can't understand is to how to determinate which element is clicked. For example JQuery:</p>

<pre><code>$('.list-group-item').on('click', function() {
    $this = $(this);

    $('.active').removeClass('active');
    $this.toggleClass('active')

   function simpleFunc(someargument) { //value of this argument depends on clicked item and can be (foo|bar|foobar ) etc
       document.write(someargument) // here whould be written some text (foo|bar|foobar ) etc
})
</code></pre>

<p>There are no tutorials or anything, except this HTML code.
Thanks</p>