Форма с NEXT и ПРЕДЫДУЩАЯ кнопка

Question

Мне нужна форма с помощью кнопки NEXT и PREVIOUS, выполненной в JQuery, с использованием опций «SHOW» и «HIDE» в JQuery. В div1 отключить опцию ПРЕДЫДУЩАЯ. Когда дело доходит до опции div5 отключить NEXT. Я думаю, что это можно сделать с помощью нескольких строк кода jQuery.

#div2 { 
 
display: none; 
 
} 
 

 
#div3 { 
 
display: none; 
 
} 
 

 
#div4 { 
 
display: none; 
 
} 
 
    
 
#div5 { 
 
display: none; 
 
}

<div class="container"> 
 
    <form> 
 
     <div id="div1"> 
 
     <p>Content 1</p> 
 
      <button>PREVIOUS</button> 
 
      <button>NEXT</button> 
 
     </div> 
 

 
     <div id="div2"> 
 
     <p>Content 2</p> 
 
      <button>PREVIOUS</button> 
 
      <button>NEXT</button> 
 
     </div> 
 

 
     <div id="div3"> 
 
     <p>Content 3</p> 
 
      <button>PREVIOUS</button> 
 
      <button>NEXT</button> 
 
     </div> 
 

 
     <div id="div4"> 
 
     <p>Content 5</p> 
 
      <button>PREVIOUS</button> 
 
      <button>NEXT</button> 
 
     </div> 
 

 
     <div id="div5"> 
 
     <p>Content 5</p> 
 
      <button>PREVIOUS</button> 
 
      <button>NEXT</button> 
 
     </div> 
 

 
    </form> 
 
</div>

Answer 1

Как об этом решении. Надеюсь, поможет!

jQuery(document).ready(function() { 
 
    jQuery('.tabs .tab-links a').on('click', function(e) { 
 
     var currentAttrValue = jQuery(this).attr('href'); 
 
    
 
     // Show/Hide Tabs 
 
     jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); 
 
    
 
     // Change/remove current tab to active 
 
     jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 
 
    
 
     e.preventDefault(); 
 
    }); 
 
    
 
     
 
    jQuery('.nextButton').on('click', function() { 
 
     
 
    var $activeTab = $('.tab-links li.active'); 
 
\t 
 
\t var $wrapper = jQuery(this).closest('.tabs'); 
 
    var indexActive = $wrapper.find('li.active').index(); 
 
    $wrapper.find('li').eq(indexActive + 1).find('a').click(); 
 
}); 
 
    
 
    jQuery('.prevButton').on('click', function() { 
 
     
 
    var $activeTab = $('.tab-links li.active'); 
 
\t 
 
\t var $wrapper = jQuery(this).closest('.tabs'); 
 
    var indexActive = $wrapper.find('li.active').index(); 
 
    $wrapper.find('li').eq(indexActive - 1).find('a').click(); 
 
}); 
 
    
 
});

.tabs { 
 
    width:100%; 
 
    display:inline-block; 
 
    } 
 

 
    .tabs h4 { 
 
    color: #00447c; 
 
    margin: 5px 0 15px 0; 
 
    display: inline-block; 
 
    } 
 
    
 
    .tab-links:after { 
 
    display:block; 
 
    clear:both; 
 
    content:''; 
 
    } 
 

 
    .tab-links { 
 
    padding: 0; 
 
    margin: 10px 0 0 0; 
 
    position: relative; 
 
    top: 2px; 
 
    } 
 

 
    .tab-links li { 
 
    margin:0px 5px 0 0; 
 
    float:left; 
 
    padding-top: 2px; 
 
    list-style:none; 
 
    } 
 

 
    .tab-links a { 
 
    padding:9px 8px 6px; 
 
    display:inline-block; 
 
    background: #c7d8e8; 
 
    border: 2px solid #c7d8e8; 
 
    border-bottom: 3px solid #c7d8e8; 
 
    font-size: 10.5px; 
 
    font-weight:600; 
 
    color:#00447c; 
 
    transition:all linear 0.15s; 
 
    } 
 

 
    .tab-links a:hover { 
 
    background: #a7cce5; 
 
    text-decoration:none; 
 
    border: 2px solid #a7cce5; 
 
    border-bottom: 3px solid #a7cce5; 
 
    color: #ee3124; 
 
    } 
 

 
    li.active a, li.active a:hover { 
 
    background:#fff; 
 
    height: 16px; 
 
    border-bottom: none; 
 
    color: #ee3124; 
 
    } 
 

 
    .tab-content, .uploaded-documents-container { 
 
    padding:15px; 
 
    border-radius:3px; 
 
    border: 2px solid #c7d8e8; 
 
    background:#fff; 
 
    font-size: .95em; 
 
    } 
 

 
    .tab-content-scroll { 
 
    max-height: 375px; 
 
    min-height: 375px; 
 
    max-width: 1100px; 
 
    min-width: 450px; 
 
    overflow: auto; 
 
    clear:both; 
 
    } 
 

 
    .tab-content-scroll-home { 
 
    min-height: 135px; 
 
    } 
 

 
    .button-bar-scroll { 
 
    min-height: 235px; 
 
    } 
 

 
    .tab-content-scroll>p { 
 
    margin-top: 0; 
 
    padding-right: 12px; 
 
    } 
 

 
    .tab-content a { 
 
    margin-top: 10px; 
 
    color: #00447c; 
 
    } 
 

 
    .tab { 
 
    display:none; 
 
    } 
 

 
    .tab.active { 
 
    display:block; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="tabs"> 
 
    <ul class="tab-links"> 
 
     <li class="active"><a href="#tab1">Tab #1</a></li> 
 
     <li><a href="#tab2">Tab #2</a></li> 
 
     <li><a href="#tab3">Tab #3</a></li> 
 
     <li><a href="#tab4">Tab #4</a></li> 
 
    </ul> 
 
    
 
    <div class="tab-content"> 
 
     <div id="tab1" class="tab active"> 
 
      <h4>Content 1</h4> 
 
      <ul class="tab-links"> 
 
     <li> 
 
\t \t <a href="#next_tab2" class="nextButton">Next</a> 
 
\t \t </li> 
 
\t </ul> 
 
     </div> 
 
    
 
     <div id="tab2" class="tab"> 
 
     <h4>Content 2</h4> 
 
     <ul class="tab-links"> 
 
     <li> 
 
      <a href="#back_tab1" class="prevButton">Prev</a> 
 
\t \t <a href="#next_tab2" class="nextButton">Next</a> 
 
\t \t </li> 
 
\t </ul> 
 
     </div> 
 
    
 
     <div id="tab3" class="tab"> 
 
     <h4>Content 3</h4> 
 
     <ul class="tab-links"> 
 
     \t <li> 
 
      <a href="#back_tab1" class="prevButton">Prev</a> 
 
\t \t <a href="#next_tab2" class="nextButton">Next</a> 
 
\t \t </li> 
 
\t </ul> 
 
     </div> 
 
    
 
     <div id="tab4" class="tab"> 
 
     \t <h4>Content 4</h4> 
 
     \t <ul class="tab-links"> 
 
     \t <li> 
 
      <a href="#back_tab1" class="prevButton">Prev</a> 
 
     </li> 
 
    </ul> 
 
     </div> 
 
    </div> 
 
</div>