带有 NEXT 和 PREVIOUS 按钮的表格答案

【问题标题】：Form with NEXT and PREVIOUS button带有 NEXT 和 PREVIOUS 按钮的表格
【发布时间】：2017-04-28 18:54:37
【问题描述】：

我需要使用 Jquery 中的“SHOW”和“HIDE”选项在 Jquery 中完成带有 NEXT 和 PREVIOUS 按钮的表单。在 div1 上禁用选项 PREVIOUS。当谈到 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>

【问题讨论】：

标签： javascript jquery html forms show-hide

【解决方案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');
	 
	 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');
	 
	 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>
		  <a href="#next_tab2" class="nextButton">Next</a>
		</li>
	</ul>
        </div>
 
        <div id="tab2" class="tab">
        <h4>Content 2</h4>
        <ul class="tab-links">
        <li>
          <a href="#back_tab1" class="prevButton">Prev</a>
		  <a href="#next_tab2" class="nextButton">Next</a>
		</li>
	</ul>
        </div>
 
        <div id="tab3" class="tab">
        <h4>Content 3</h4>
        <ul class="tab-links">
        	<li>
          <a href="#back_tab1" class="prevButton">Prev</a>
		  <a href="#next_tab2" class="nextButton">Next</a>
		</li>
	</ul>
        </div>
 
        <div id="tab4" class="tab">
        	<h4>Content 4</h4>
        	<ul class="tab-links">
        	<li>
          <a href="#back_tab1" class="prevButton">Prev</a>
      </li>
  </ul>
        </div>
    </div>
</div>

【讨论】：

感谢亨利的回答，这是我需要的图像>>> s29.postimg.org/fc5342l2v/form.png
@JasminLjima 如果您喜欢我的答案，您可以通过单击我的答案旁边的复选标记将其标记为正确答案，直到它变为绿色。谢谢！