[英]Form with NEXT and PREVIOUS button
我需要使用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>
這個解決方案怎么樣。 希望能幫助到你！
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>
Rails中帶有“下一個”和“上一個”按鈕的表單（JavaScript）
[英]Form with 'Next' and 'Previous' button in Rails (Javascript)
試圖使下一個和上一個按鈕出現在注冊表的不同時間
[英]Trying to make the next and previous button appear at different times of the registration form
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.