带有下一个和上一个按钮的表格

Question

I need form with NEXT and PREVIOUS button done in Jquery using the "SHOW" and "HIDE" option in Jquery. 我需要使用Jquery中的“ SHOW”和“ HIDE”选项在Jquery中完成NEXT和PREVIOUS按钮的表单。 On div1 disable option PREVIOUS. 在div1上，禁用选项PREVIOUS。 When it comes to div5 disable option NEXT. 当涉及到div5时，禁用选项NEXT。 I think this can be done with a few lines of jQuery code. 我认为这可以通过几行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

How about this solution. 这个解决方案怎么样。 Hope it helps! 希望能帮助到你！

 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>

带有下一个和上一个按钮的表格

问题描述

1 个解决方案

解决方案1
2 2016-12-13 16:22:43

带有下一个和上一个按钮的表格

问题描述

1 个解决方案

解决方案1 2 2016-12-13 16:22:43

解决方案1
2 2016-12-13 16:22:43