大佬教程收集整理的这篇文章主要介绍了使用jQuery提交表单后,保持当前选项卡,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的例子[jsfiddle]:
HTML:
<ul class='tabs'> <li><a href='#tab1'>Tab 1</a></li> <li><a href='#tab2'>Tab 2</a></li> </ul> <div id='tab1'> <h3>Section 1</h3> <p>Lorem ipsum dolor sit amet,consssectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p> <form id="form1" action="" method="post"> <input id="button-1" name="" type="submit" /> </form> </div> <div id='tab2'> <a name="tab2"></a> <h3>Section 2</h3> <p>Aenean et est tortor. In pharetra pretium convallis. Mauris sollicitudin ligula non mi hendrerit varius. Fusce convallis hendrerit mauris,eu accumsan nisl aliquam eu.</p> <form id="form2" action="" method="post"> <input id="button-2" name="" type="submit" /> </form> </div> <div> <h2>RESULTS </h2> </div>
JavaScript的:
$(document).ready(function(){ $('ul.tabs').each(function(){ var $active,$content,$links = $(this).find('a'); $active = $links.first().addClass('active'); $content = $($active.attr('href')); $links.not(':first').each(function () { $($(this).attr('href')).hide(); }); $(this).on('click','a',function(e){ $active.removeClass('active'); $content.hide(); $active = $(this); $content = $($(this).attr('href')); $active.addClass('active'); $content.show(); e.preventDefault(); }); }); });
CSS:
* {padding:0; margin:0;} html {padding:15px 15px 0;font-family:sans-serif;font-size:14px;} p,h3 {margin-bottom:15px;} div {padding:10px;width:600px;background:#fff;} ul.tabs {margin-left:2px;} #tab1,#tab2 {border-top: solid 1px #ccc;margin-top: -1px; } #tab2 {display:none;}a ul.tabs li {list-style:none;display:inline;} ul.tabs li a {padding:5px 10px;display:inline-block;background:#666;color:#fff;text-decoration:none;} ul.tabs li a.active {background:#fff;color:#000;border: solid 1px #ccc; border-width: 1px 1px 0 1px;}
非常感谢您的帮助
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />
将其放入编码中并按如下方式更改脚本
$("#accordion").accordion({ header: "h3",autoHeight: false,event: "mousedown",active: activeIndex,ui: "PageName.aspx",change: function (event,ui) { var index = $(this).accordion("option","active"); $('#<% =hidAccordionIndex.ClientID %>').val(index); } });
以上是大佬教程为你收集整理的使用jQuery提交表单后,保持当前选项卡全部内容,希望文章能够帮你解决使用jQuery提交表单后,保持当前选项卡所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。