title: Custom function not running in an "if" statement
body: <p>I'm new in Javascript/jQuery as well as in Stack Overflow so please don't be mad at me if I made some huge mistakes.
  I'm working on an HTML page using Bootstrap 3.3.7 and I have a pagination button group that switches the visibility of some  elements via adding or removing the "hide" class. I made some custom functions to do that in js, the matter is that those functions work fine when they are called by a button click, but they're not when I try to put them inside an "if" statement. I've already tried to put a simple 'alert' inside the statement to see if it's working and it does, but the functions are not running.</p>
  
  <p>Can somebody explain to me what I'm missing?
  Here's my code below:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!--pagination--&gt;
    &lt;div id="pag-gal"&gt;
      &lt;div class="btn-group" role="group" aria-label="btngrp"&gt;
        &lt;button type="button" class="btn btn-default" id="pi"&gt;
            &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;button type="button" class="btn btn-default attivo" id="p1"&gt;1&lt;/button&gt;
        &lt;button type="button" class="btn btn-default" id="p2"&gt;2&lt;/button&gt;
        &lt;button type="button" class="btn btn-default" id="p3"&gt;3&lt;/button&gt;
        &lt;button type="button" class="btn btn-default" id="pa"&gt;
            &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!--switching divs--&gt;
    &lt;div id="sob1" class="sob"&gt;&lt;/div&gt;
    &lt;div id="sob2" class="sob hide"&gt;&lt;/div&gt;
    &lt;div id="sob3" class="sob hide"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript/jQuery</p>
  
  <pre><code>   &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
      function pag1(){
        return function(){
          $('#p1').addClass('attivo');
          $('#p2').removeClass('attivo');
          $('#p3').removeClass('attivo');
          $('#sob1').removeClass('hide');
          $('#sob2').addClass('hide');
          $('#sob3').addClass('hide');
        };
      };
      function pag2(){
        return function(){
          $('#p2').addClass('attivo');
          $('#p1').removeClass('attivo');
          $('#p3').removeClass('attivo');
          $('#sob2').removeClass('hide');
          $('#sob1').addClass('hide');
          $('#sob3').addClass('hide');
        };
      };
      function pag3(){
        return function(){
          $('#p3').addClass('attivo');
          $('#p1').removeClass('attivo');
          $('#p2').removeClass('attivo');
          $('#sob3').removeClass('hide');
          $('#sob2').addClass('hide');
          $('#sob1').addClass('hide');
        };
      };
      $('#p1').click(pag1());
      $('#p2').click(pag2());
      $('#p3').click(pag3());
      $('#pi').click(function(){
          if($('.attivo').is('#p1')){
            alert("The statement is true");  //This is working
            pag3();                          //this is not
          };
          if($('.attivo').is('#p2')){
            pag1();                          //nor this
          };
          if($('.attivo').is('#p3')){
            pag2();                          //or this
          };
        });
        $('#pa').click(function(){
            if($('.attivo').is('#p1')){
              pag2();
            };
            if($('.attivo').is('#p2')){
              pag3();
            };
            if($('.attivo').is('#p3')){
              pag1();
            };
          });
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>When I click a #p* button the pag* functions are working when I click #pi or #pa they are not.</p>