title: How to make Pagination "next page" and "previous page" go to the specified href inside a form?
body: <p>I am trying to make a simple pagination page between the different parts of my form and they should be "active" (= have different display) when the appropriate part of the form is displayed.</p>
  
  <p>Furthermore, I want to have "previous page" and "next page" using "&laquo;" and "&raquo;" brackets and make them set the targeted page to active <b>AND</b> load it.</p>
  
  <p>I managed these first steps, and my "&laquo;" and "&raquo;" work to change the active display <b>but</b> I cannot find how to display the part of my form at the same time.</p>
  
  <p>In conlusion, I have a <b>jquery</b> problem to set "&laquo;" and "&raquo;" so when they are clicked, they display the appropriate "next" or "previous" part of my form (referred by their id "step1" "step2" or "step").</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
        var pageItem = $(".pagination li").not(".prev,.next");
        var prev = $(".pagination li.prev");
        var next = $(".pagination li.next");
  
        pageItem.click(function() {
          pageItem.removeClass("active");
          $(this).not(".prev,.next").addClass("active");
       target = $(this).find( 'a.tab' ).attr('href');
    
       $('.case-content &gt; div').not(target).hide();
    
       $(target).fadeIn(600);
  
        });
  
        next.click(function() {
          $('li.active').removeClass('active').next().addClass('active');
       // I think something should go here
        });
  
        prev.click(function() {
          $('li.active').removeClass('active').prev().addClass('active');
       // and also here
        });
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="caseform"&gt;
        &lt;div class="center"&gt;
          &lt;ul class="pagination"&gt;
            
            &lt;li class="prev"&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
  
     &lt;li class="active"&gt;&lt;a class="tab" href="#step1"&gt;1&lt;/a&gt;&lt;/li&gt;
   
            &lt;li&gt;&lt;a class="tab" href="#step2"&gt;2&lt;/a&gt;&lt;/li&gt;
  
            &lt;li&gt;&lt;a class="tab" href="#step3"&gt;3&lt;/a&gt;&lt;/li&gt;
   
            &lt;li class="next"&gt;&lt;a href="#"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      
      &lt;form action="/case/createcase.php" method="post" autocomplete="off"&gt;
        &lt;div class="case-content"&gt;
          
          &lt;div id="step1"&gt;
            &lt;h2&gt;Step 1&lt;h2&gt;
            &lt;!-- some input text fields --&gt;
          &lt;/div&gt;
  
          &lt;div id="step2"&gt;   
            &lt;h2&gt;Step 2&lt;/h2&gt;
            &lt;!-- some input text fields --&gt;
          &lt;/div&gt;
     
          &lt;div id="step3"&gt;
            &lt;h2&gt;Step 3&lt;/h2&gt;   
            &lt;!-- some input text fields --&gt;
          &lt;/div&gt;
            
        &lt;/div&gt;&lt;!-- case-content --&gt;
      &lt;/form&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The "&laquo;" and "&raquo;" should point to the href of the previous or next part of the form relative to the presently active part of the form.</p>
  
  <p>However, in my code, they just "set" the li to active (display is ok) but do not point to the href inside the link.</p>
  
  <p>Furthemore, even if I set "not(".prev,.next")", they still display as active when I click for example ".prev" from step 1 or ".next" from step 3.</p>
  
  <p>If something is unclear, I would be happy to respond. I have an attached CSS file for the display if needed. I did not put it here to not make this code too long.</p>