问题
I use JQueryUI TABS plugin.
There is my tabs structure.
<div id="tabs">
<ul>
<li><a href='#tabs-1'>TabGroup1</a></li>
<li><a href='#tabs-2'>TabGroup2</a></li>
</ul>
<div id='tabs-1'>
<a href='tab1_link1.html'>TabGroup1-link1</a>
<a href='tab1_link2.html'>TabGroup1-link2</a>
</div>
<div id='tabs-2'>
<a href='tab2_link1.html'>TabGroup2-link1</a>
<a href='tab2_link2.html'>TabGroup2-link2</a>
</div>
</div>
I use such code to select and load first link in tab, when tab is selected. It works itself.
$(function() {
$( "#tabs" ).tabs();
// Activate first link on tab
$( "#tabs" ).bind( "tabsselect", function(event, ui) {
window.location.href = $(ui.panel).find('a:first').attr('href');
});
});
BUT in my task addition code for selecting tab by URL parameters strongly nessesary. So if visitor opened link from second tab-group, second tab must be showed opened, not default first one.*
I have working code which show correct tab when link from this tab is loaded (no AJAX or such, just ussual links). $URL['part']
is variable I recieve from my URL in engine, this works fine separately.
<?php if(@$URL['part']=='part2'){
echo '<script>$(function() { $("#tabs").tabs("select","#tabs-2"); });</script>';
} ?>
BUT when I use both these code-blocks it cause page repeatedly infinite reload :-(
UPDATED:
Notice, that both of blocks of code use SELECT event, that why the looping occurs.
UPDATED2:
I suppose, if use ONCLICK for loading link when tab is selected, and SELECT on activation tab due to URL settings, it can solve the problem. But I don't know how to write this in code.
回答1:
Does this work if you move the processing inside the tabs creation:
$('#tabs').tabs({
select: function(event, ui) {
window.location.href = $(ui.panel).find('a:first').attr('href');
}
});
In a study of you code, it might be better to check the URL and not go anywhere if it is the same page, either by link OR by tab select:
$('#tabs').tabs({
select: function(event, ui) {
checkUrl(event, ui.panel);
}
});
// handle link click on current tab
$('div>a').click(function(event) {
checkUrl(event, event.target);
});
function checkUrl(event, ui) {
var ehref = $(event.target).attr('href');
var wl = window.location.href;
var currentLocation = typeof ehref == "undefined" ? wl: ehref;
var newLocation = $(ui.panel).find('a:first').attr('href');
if (currentLocation != newLocation) {
window.location.href = newLocation;
}
};
In reference to your comment, there is a create handler so you would have the bind inside that:
$('#tabs').tabs({
create: function(event, ui) {
$( "#tabs" ).bind( "tabsselect", function(event, ui) {
window.location.href = $(ui.panel).find('a:first').attr('href');
});
}
});
but I am unsure of the event firing on the creation sequence, and if the select of the tab occurs before or after the create event (I would think after) as I have not tested this.
回答2:
UPDATED:
This solution isn't correct! I keep it for historical reasons and comments are below it. https://stackoverflow.com/a/10642137/1368570 - this is working correct solution: clear and simple
I have found solution very close to task:
<script language="JavaScript" type="text/javascript">
function MySelect(event, ui){
// selected - currently selected tab (string)
var clicked_tab = '' + ui.index //clicked tab
if(selected !== clicked_tab ){
//So this code will works ONLY when another tab is selected, so no infinite loop
//alert(selected+'/'+ui.index);
// Activate first link on tab
$( "#tabs" ).bind( "tabsselect", function(event, ui) {
window.location.href = $(ui.panel).find('a:first').attr('href');
});
}
}
$(function() {
$('#tabs').tabs({
select: function(event, ui) {
MySelect(event, ui);
}
});
});
//retrieve the index of the currently selected tab
var tabs = $('#tabs').tabs();
var selected = '' + tabs.tabs('option', 'selected'); // from zero 0
</script>
Code to acrivate propper TAB basing on the URL parameter processed in my engine
<?php
if(@$URL['part']=='part1'){
echo '<script>$(function() { $("#tabs").tabs("select","#tabs-1"); });</script>';
}
if(@$URL['part']=='part2'){
echo '<script>$(function() { $("#tabs").tabs("select","#tabs-2"); });</script>';
}
if(@$URL['part']=='part3'){
echo '<script>$(function() { $("#tabs").tabs("select","#tabs-3"); });</script>';
}
?>
PROBLEM:
When I go from 1-st tab to 2-d or 3-d, window.location.href don't work, URL dont changes.
If I go from any tab except frist, all works perfectly.
I am too tired today to find solution to this issue, if any one have ideas, will be glad to hear them!
Also, when I uncomment alert in my code, I see that selected var is [object Object]. So if I compare object with non-object, why this complete solution works well in most cases?
回答3:
This is complete final solution I found, which WORKS (crossbrowser)!
Creates tabs
$(function() {
$( "#tabs" ).tabs();
});
Select the tab which must be active for the current URL we have
<?php
if(@$URL['part']=='part1'){
echo '$(function() { $("#tabs").tabs("select","#tabs-1"); });';
}
if(@$URL['part']=='part2'){
echo '$(function() { $("#tabs").tabs("select","#tabs-2"); });';
}
?>
The below code MUST be after we started tabs and selected which one is now active, otherwise we will recieve infinite url-reloading!
$(function() {
$('#tabs').tabs({
select: function(event, ui) {
window.location.href = $(ui.panel).find('a:first').attr('href');
}
});
});
So, when I moved tab selection based on URL to the begining of code, this solved all the issues and make solution this simple!
回答4:
If I read it right, then you will be having same code in the HTMLs in the link, i.e.
<div id="tabs">
<ul>
<li><a href='#tabs-1'>TabGroup1</a></li>
<li><a href='#tabs-2'>TabGroup2</a></li>
</ul>
<div id='tabs-1'>
<a href='tab1_link1.html'>TabGroup1-link1</a>
<a href='tab1_link2.html'>TabGroup1-link2</a>
</div>
<div id='tabs-2'>
<a href='tab2_link1.html'>TabGroup2-link1</a>
<a href='tab2_link2.html'>TabGroup2-link2</a>
</div>
</div>
and you will be calling the $( "#tabs" ).tabs()
on that page. IF so, why not use $( "#tabs" ).tabs({ active: 1 })
in the page where the link is supposed to redirect?
来源:https://stackoverflow.com/questions/10622495/selection-tab-and-onselect-code-conflict-infinite-reloading-of-page