我遇到嵌套标签问题。当我点击Tab 2时,默认情况下我需要嵌套1来显示。相反,它只显示一个空白选项卡,直到我单击嵌套2并单击返回嵌套1。
我希望能够通过在可能的情况下向ready函数添加一些东西来解决这个问题,因为更改实际的.js文件是一件痛苦的事......感谢您的支持!
HTML:
<!--Begin Tabs-->
<div id="tab-container1">
<ul class="tabs">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3" rel="external-4.html">Tab 3</a></li>
</ul>
<div class="tab-panel">
<div id="tab-1">Tab 1 Content</div>
<div id="tab-2">
<!--BEGIN NESTED TABS-->
<div class="tab-carousel">
<div id="tab1-N">
<ul id="ul-N" class="tabs-nested">
<li><a href="#tab1-a" rel="external-1.html">Nested 1</a></li>
<li><a href="#tab1-b" rel="external-2.html">Nested 2</a></li>
<li><a href="#tab1-c" rel="external-3.html">Nested 3</a></li>
</ul>
<div class="tab-panel-nested">
<div id="tab1-a">Nested Tab One Content</div>
<div id="tab1-b">Nested Tab Two Content</div>
<div id="tab1-c">Nested Tab Three Content</div>
</div>
</div>
</div>
<!--END NESTED TABS-->
</div>
<div id="tab-3">Tab 3 Content</div>
</div>
</div>
<!--End Tabs-->
<script type="text/javascript">
jQuery(document).ready(function(){
$('#tab-container1 ul').tabs();
});
</script>
JS:
jQuery.fn.tabs = function () {
return this.each(function () {
var ul = jQuery(this);
ul.find('a[href^=#]').each(function (i) {
var tablink = jQuery(this);
if (i) {
jQuery(tablink.attr('href')).hide();
}
else {
tablink.addClass('current');
}
tablink.click(function () {
jQuery(ul.find('a.current').removeClass('current').attr('href')).hide();
jQuery(tablink.addClass('current').attr('href')).show();
if(tablink.attr('rel')){
$("#tab-preloader").show();
$.ajax(
{
url: tablink.attr('rel'),
cache: false,
success: function(message)
{
jQuery(tablink.attr('href')).empty().append(message);
$("#tab-preloader").hide();
}
});
};
return false;
});
});
});
};