javascript - 反射(reflect)后退/前进类(class)的变化

Question

首先，对于这么长的问题深表歉意。我真的是一个新手，特别是。使用 javascript 和 jQuery。

我正在使用 jQuery Address 并将我的导航基于 tabs example (也基于 jQuery UI)。我有四个按钮(ID 为 tab1、tab2、tab3 和 tab4)，根据事件选项卡，它们应该看起来重叠(或有一个“尾部”)。因此，每个图像的背景图像都会相应变化(取决于类 h、r、p 和 c)。

<ul id="menu" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-corner-top ui-tabs-selected ui-state-active"><a href="#Hazel" title="Hazel" id="tab1" class="h">Hazel</a></li>
    <li class="ui-corner-top ui-state-default"><a href="./red.html" title="Red" id="tab2" class="h"><img src="imagestail.png" alt="" />Red</a></li>
    <li class="ui-corner-top ui-state-default"><a href="./pink.html" title="Pink" id="tab3" class="h tail"><img src="images/tail.png" alt="" />Pink</a></li>
    <li class="ui-corner-top ui-state-default"><a href="./cyan.html" title="Cyan" id="tab4" class="h tail"><img src="images/tail.png" alt="" />Cyan</a></li>
</ul>

以下是我尝试的初始代码，如果仅单击按钮，它看起来很棒。但是，如果用户后退/前进，类将保持上次单击时的状态。

$(document).ready(function() {

$("#tab1").unbind("click").click(function(){
$("#tab1,#tab2,#tab3,#tab4").removeClass("r p c").addClass("h");
$("#tab2").removeClass("tail");
$("#tab3, #tab4").addClass("tail");
return false;
})

$("#tab2").unbind("click").click(function(){
$("#tab1,#tab2,#tab3,#tab4").removeClass("h p c").addClass("r");
$("#tab3, #tab2").removeClass("tail");
$("#tab4").addClass("tail");
return false;
})

$("#tab3").unbind("click").click(function(){
$("#tab1,#tab2,#tab3,#tab4").removeClass("h r c").addClass("p");
$("#tab3, #tab4").removeClass("tail");
$("#tab2").addClass("tail");
return false;
})

$("#tab4").unbind("click").click(function(){
$("#tab1,#tab2,#tab3,#tab4").removeClass("h r p").addClass("c");
$("#tab4").removeClass("tail");
$("#tab3, #tab2").addClass("tail");
return false;
})
});

我正在寻找类似于类(class)变化历史的东西。我已经尝试过应该在 URL 更改时更改类的代码，以及查找父级是否包含类“ui-state-active”或“ui-tabs-selected”的代码，目的是更准确地添加和删除类在链接中，但到目前为止都没有用。这是我尝试过的代码示例:

$(document).ready(function() {
if ($("#tab1").parent().hasClass('ui-tabs-selected')) {
    $("#tab1,#tab2,#tab3,#tab4").removeClass("r p c").addClass("h");
    $("#tab2").removeClass("tail");
    $("#tab3, #tab4").addClass("tail");    
}
else if ($("#tab2").parent().hasClass('ui-tabs-selected')) {
    $("#tab1,#tab2,#tab3,#tab4").removeClass("h p c").addClass("r");
    $("#tab3, #tab2").removeClass("tail");
    $("#tab4").addClass("tail");
}
else if ($('#tab3').parent().hasClass('ui-tabs-selected')) {
    $("#tab1,#tab2,#tab3,#tab4").removeClass("h r c").addClass("p");
    $("#tab3, #tab4").removeClass("tail");
    $("#tab2").addClass("tail");    
}
else ($('#tab4').parent().hasClass('ui-tabs-selected')) {
    $("#tab1,#tab2,#tab3,#tab4").removeClass("h r p").addClass("c");
    $("#tab4").removeClass("tail");
    $("#tab3, #tab2").addClass("tail")  
}
});

我不知道是否可能与 jQuery 地址发生冲突，或者我输入的内容有误，或者遗漏了另一个可能的解决方案。

如果有人能引导我朝着正确的方向前进，我将不胜感激。此外，如果您需要更多代码来帮助我，我将非常乐意提供。

Answer 1

您必须创建一个函数来为您选择选项卡，然后从 $.address.change 事件中调用它。

$.address.change(function (e) {
    var tabName = e.pathNames[0];
    $("#tabsContainer").children("li").removeClass("ui-tabs-selected");
    $("#" + tabName).click(); // i think this should do all the job
});