gpt4 book ai didi

jquery-ui - 嵌套的 jQuery UI 选项卡后退按钮历史记录

转载 作者:行者123 更新时间:2023-12-02 05:13:11 37 4
gpt4 key购买 nike

我正在使用 jQuery Address plug-in使我的 jQuery UI 选项卡可添加书签并符合后退按钮历史记录。效果很好。

但是,我想知道是否可以为嵌套选项卡提供相同类型的“深度链接”?例如,我有以下内容:

<div id="tabs">
<ul class="links">
<li><a href="#one">main tab one</a></li>
<li><a href="#two">main tab two</a></li>
<li><a href="#three">main tab three</a></li>
<li><a href="#four">main tab four</a></li>
</ul>
<div id="one"> Main tab one content </div>
<div id="two">
Main tab two content
<div id="nested">
<ul>
<li><a href="#nestedone">nested tab one</a></li>
<li><a href="#nestedtwo">nested tab two</a></li>
<li><a href="#nestedthree">nested tab three</a></li>
</ul>
<div id="nestedone"> nested tab one </div>
<div id="nestedtwo"> nested tab two </div>
<div id="nestedthree"> nested tab three </div>
</div> <!-- end nested -->
</div>
<div id="three"> Main tab three content </div>
<div id="fout"> Main tab four content </div>
</div> <!-- end tabs -->


<script>
$(document).ready(function(){
/* main tabs stuff */
var $tabs = $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');

/* nested tabs */
var $nested = $("#nested").tabs().addClass('ui-tabs-hz');
$("#nested ul").removeClass('ui-tabs-nav');

/* show the hash's tab whenever the address is changed */
$.address.change(function(event){
$("#tabs").tabs( "select" , window.location.hash ) ;
})

/* when the tab is selected update the url with the hash */
$("#tabs").bind("tabsselect", function(event, ui) {
window.location.hash = ui.tab.hash;
})
});
</script>

一切都适用于主要(外部标签):

  • 选项卡的 href 链接已正确放置在 URL 上
  • 外部标签服从浏览器的后退和前进按钮
  • 外部标签可以添加书签

但是,我似乎无法为内部选项卡获得相同类型的功能。

鉴于嵌套选项卡包含在“主”选项卡之一中,上面的绑定(bind)函数将 $(this) 视为外部选项卡(即使单击嵌套选项卡)。结果是 JavaScript 代码针对嵌套选项卡正确执行,但随后执行时就好像最后一个主(外部)选项卡是所选选项卡一样。

我似乎无法弄清楚如何在处理完嵌套选项卡之后和运行最后一个主(外部)选项卡之前停止执行 JavaScript。我能得到的最接近的是将以下内容添加到绑定(bind)函数并停止在包含嵌套选项卡的外部选项卡上执行。

   $("#tabs").bind("tabsselect", function(event, ui) {          
if ($(ui.tab).closest('div').attr('id') !== "nested") {
window.location.hash = ui.tab.hash;
}
})

我确定我遗漏了一些明显的东西。有什么建议吗?

谢谢!

最佳答案

您可能必须采取某种变通方法来组合哈希值。我对 .address 插件没有太多经验,但是像这样的东西怎么样:

<div id="tabs">
<ul class="links">
<li><a href="#one">main tab one</a></li>
<li><a href="#two">main tab two</a></li>
<li><a href="#three">main tab three</a></li>
<li><a href="#four">main tab four</a></li>
</ul>
<div id="one"> Main tab one content </div>
<div id="two">
Main tab two content
<div id="nested">
<ul>
<li><a href="#two-nestedone">nested tab one</a></li>
<li><a href="#two-nestedtwo">nested tab two</a></li>
<li><a href="#two-nestedtwo">nested tab three</a></li>
</ul>
<div id="two-nestedone"> nested tab one </div>
<div id="two-nestedtwo"> nested tab two </div>
<div id="two-nestedthree"> nested tab three </div>
</div> <!-- end nested -->
</div>
<div id="three"> Main tab three content </div>
<div id="four"> Main tab four content </div>
</div> <!-- end tabs -->

对于 javascript:

$(document).ready(function(){
/* main tabs stuff */
var $tabs = $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');

/* nested tabs */
var $nested = $("#nested").tabs().addClass('ui-tabs-hz');
$("#nested ul").removeClass('ui-tabs-nav');

/* show the hash's tab whenever the address is changed */
$.address.change(function(event){
var arrParts = window.location.hash.substring(1).split("-");
$("#tabs").tabs( "select" , '#' + arrParts[0] ) ;
if (arrParts.length > 1) {
$("#nested").tabs( "select" , '#' + arrParts[1] ) ;
}
})

/* when the tab is selected update the url with the hash */
$("#tabs, #nested").bind("tabsselect", function(event, ui) {
window.location.hash = ui.tab.hash;
event.stopPropagation();
})
});

关于jquery-ui - 嵌套的 jQuery UI 选项卡后退按钮历史记录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3579778/

37 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com