在使用jQuery提交表单后，保持当前选项卡

我试图留在一个特定的选项卡（在本例中为tab2），但在单击提交按钮后，选项卡将恢复为具有默认活动类的选项卡1。 我用这个打了一堵砖墙。

这是我的例子[jsfiddle] ：

HTML：

 
Tab 1
 
Tab 2
 
 
 
Section 1
 
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.
 
  
 
 
  
Section 2
 
Aenean et est tortor. In pharetra pretium convallis. Mauris sollicitudin ligula non mi hendrerit varius. Fusce convallis hendrerit mauris, eu accumsan nisl aliquam eu.
 
  
 
 
 
RESULTS 
  

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;} 

非常感谢您的帮助

Answer 1

试试这个

将其放入编码中并按如下方式更改脚本

 $("#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); } }); 

Answer 2

 
 
 
Tab 1
 
Tab 2
 
 
 
 The jQuery function: $(document).ready(function(){ $("#tab").tabs(); var param = $(document).getUrlParam('tab'); if (param !=null) $("#tab").tabs('select',param); else $("#tab").tabs(); }); 

Answer 3

您可以在URL中指定选项卡。 选项卡是URL中的锚点：yourURL / #tab

Answer 4

它是如此容易。 提交表单后，您必须自动单击所需的选项卡。 首先在您的标签中添加Id，如 ，然后在关闭之前使用Javascript

Answer 5

添加e.preventDefault（）; 到提交按钮。

工作示例： http ： //jsfiddle.net/Widmore/cwHQA/2/

Answer 6

当用户单击发送按钮时，您可以将所选选项卡的“id”存储在变量中，并在将表单发布到服务器后将其还原。 有关更多信息，请查看表单事件

http://api.jquery.com/category/events/form-events/

Answer 7

尝试使用jquery Form Plugin通过ajax而不是整页刷新提交表单： http ： //www.malsup.com/jquery/form/

Answer 8

在Submit按钮的onclick()事件中使用JQuery.ajax（）以异步方式回发值。 这样，就不会有窗口重新加载，因为回发将在后台进行。

HTML

JavaScript的

 ​function submit(){ $.ajax({ type: "POST", url: "submit.php", data: { param1: "param1", param2: "param2" } }).done(function() { alert( "Submitted" ); }); }​