[英]Jquery Tabs reset the tabs after clicking a button inside Tab
When I click on the button inside a tab, the tab is loading and it returns to the first Tab.. this picture will make things clear: 当我单击选项卡中的按钮时,该选项卡正在加载,并返回到第一个选项卡。此图片将使情况变得清晰:
For example If I clicked on REDSEA the tab selected ASIA will change and returns to the first one AFRICA, what I need is when I Click on button REDSEA stay inside the tab ASIA selected! 例如,如果我单击REDSEA,则选定的ASIA选项卡将更改并返回到第一个非洲地区,我需要的是,当我单击REDSEA按钮时,留在选定的ASIA选项卡中!
This is the code that Im using: 这是我使用的代码:
<script>
$(function () {
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">AFRICA</a></li>
<li><a href="#tabs-2">EUROPE</a></li>
<li><a href="#tabs-3">AMERICA</a></li>
<li><a href="#tabs-4">ASIA</a></li>
<li><a href="#tabs-5">OTHER TRADE</a></li>
</ul>
<div id="tabs-1">
<asp:Button id="tr" OnClick="trd_clk1" runat="server" text='<%# Bind("trade") %>' UseSubmitBehavior="False" CommandName="tr" Width="105px" Height="22" CommandArgument='<%# Bind("trade") %>' CssClass="btn" />
</div>
'The same thing for other tabs
</div>
Try this to set hash changes on URL when tab change and maintain hash on postback 尝试此操作以在选项卡更改时在URL上设置哈希更改,并在回发时维护哈希
<script>
$(function () {
$( "#tabs" ).tabs();
// set hash on tab change
$('#tabs ul li a').click(function () {
location.hash = $(this).attr('href');
});
//maintain hash on post back
$('#<%=Page.Form.ClientID%>').attr('onsubmit', 'this.action += top.location.hash');
})
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">AFRICA</a></li>
<li><a href="#tabs-2">EUROPE</a></li>
<li><a href="#tabs-3">AMERICA</a></li>
</ul>
<div id="tabs-1">
tab 1
</div>
<div id="tabs-2">
tab 2
<asp:Button ID="Button2" runat="server" Text='click' />
</div>
<div id="tabs-3">
tab 3
<asp:Button ID="Button3" runat="server" Text='click' />
</div>
</div>
You only need to change JavaScript code 您只需要更改JavaScript代码
I have another solution, implemented and tested with chrome, IE and safari. 我有另一种解决方案,已通过chrome,IE和safari实施和测试。
I am using the "localStorage" object and it suppose to work all the browsers which support localStorage. 我正在使用“ localStorage”对象,并且它假定可以运行所有支持localStorage的浏览器。
On the click event of tab, I am storing the currentTab value to local storage. 在选项卡的click事件中,我将currentTab值存储到本地存储中。
This will work for as the content page does not append the url with hash. 这将适用于内容页面,不会在URL后面附加哈希值。
$(document).ready(function() {
jQuery('.ctabs .ctab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
localStorage["currentTab"] = currentAttrValue;
// Show/Hide Tabs
jQuery('.ctabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
if (localStorage["currentTab"]) {
// Show/Hide Tabs
jQuery('.ctabs ' + localStorage["currentTab"]).show().siblings().hide();
// Change/remove current tab to active
jQuery('.ctabs .ctab-links a[href$="' + localStorage["currentTab"] + '"]').parent('li').addClass('active').siblings().removeClass('active');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.