I want disable and enable jQueryUI tabs based on the AJAX content.
<script>
$(function () {
$("#tabs").tabs({
disabled: [1, 2,3],
collapsible: true,
fx: [{
opacity: 'toggle',
duration: 'slow',
height: 'toggle'
},
{
opacity: 'toggle',
duration: 'slow',
height: 'toggle'
}],
beforeLoad: function (event, ui) {
ui.jqXHR.error(function () {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. ";
});
}
});
});
</script>
And HTML Code:
<div id="tabs">
<ul>
<li class="context-tab"><a id="recent-tab" href="#iframe1">Recent</a></li>
<li class="context-tab"><a id="popular-tab" href="#iframe2">Popular</a></li>
<li class="context-tab"><a id="random-tab" href="#iframe3">Random</a></li>
<li class="context-tab"><a id="question-tab" href="#iframe4">By Question</a></li>
</ul>
<iframe id="iframe1" src="Default2.aspx" style="width: 100%;" height="900"></iframe>
<iframe id="iframe2" src="Default3.aspx" style="width: 100%;"></iframe>
<iframe id="iframe3" src="Default2.aspx" style="width: 100%;"></iframe>
<iframe id="iframe4" src="Default3.aspx" style="width: 100%;"></iframe>
</div>
For example when the user selects popular-tab
it loads Default3.aspx page. In every page I have Next
Button. I want when the user clicks the Next
button this and the next tab are available to the user, but not the previous tabs. For example when a user in recent-tab
and clicks the Next
button recent-tab
is enabled but popular-tab
is disabled.
Edit 01:
i have 4 pages and example page1.aspx
,page2.aspx
,page3.aspx
,page4.aspx
, in default i have tab and when user select tabe recent-tab
load page1.aspx
for user and page2.aspx
and page3.aspx
and page4.aspx
is unactive, in page1 i have button when user click in this button i want go to popular-tab
and load page3.aspx
and unactive recent-tab and active popular-tab. and etc, when write this code for button next in page2 not work. thanks for help me
Thanks.