title: handle bootstrap list-group click
body: <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>