Question

首先，为长期问题道歉。我真的是个新手，特别是。用javascript＆amp; jQuery的。

我正在使用jQuery地址并基于tabs example（也基于jQuery UI）导航。我有四个按钮（带有标签tab1，tab2，tab3和tab4），它们应该看起来重叠（或有一个“尾部”），具体取决于活动标签。因此，每个的背景图像相应地改变（取决于类别h，r，p＆amp; 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;
})
});

我正在寻找与课程变化类似的历史。我已经尝试了在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
});

Answer 2

我已经能够使下面的代码工作了（虽然看起来像重复的代码很长）：

$(document).ready(function() {
$(function() {
  var loc = window.location.href; // For when Hazel is refreshed
  if(/Hazel/.test(loc)) {
    $("#tab1,#tab2,#tab3,#tab4").removeClass("r p c").addClass("h");
    $("#tab2").removeClass("tail");
    $("#tab3, #tab4").addClass("tail");
  }
});
$(function() {
  var loc = window.location.href; // For when Red is refreshed
  if(/Red/.test(loc)) {
    $("#tab1,#tab2,#tab3,#tab4").removeClass("h p c").addClass("r");
    $("#tab3, #tab2").removeClass("tail");
    $("#tab4").addClass("tail");
  }
});
$(function() {
  var loc = window.location.href; // For when Pink is refreshed
  if(/Pink/.test(loc)) {
    $("#tab1,#tab2,#tab3,#tab4").removeClass("h r c").addClass("p");
    $("#tab3, #tab4").removeClass("tail");
    $("#tab2").addClass("tail"); 
  }
});
});
$(function() {
  var loc = window.location.href; // For when Cyan is refreshed
  if(/Cyan/.test(loc)) {
    $("#tab1,#tab2,#tab3,#tab4").removeClass("h r p").addClass("c");
    $("#tab4").removeClass("tail");
    $("#tab3, #tab2").addClass("tail");
  }
});
$("#tab1").click(function(){
$(window).bind("hashchange", function () {
  var loc = window.location.href; // For when Hazel tab is clicked
  if(/Hazel/.test(loc)) {
    $("#tab1,#tab2,#tab3,#tab4").removeClass("r p c").addClass("h");
    $("#tab2").removeClass("tail");
    $("#tab3, #tab4").addClass("tail");
  }
});
});
$("#tab2").click(function(){
$(window).bind("hashchange", function () {
  var loc = window.location.href; // For when Red tab is clicked
  if(/Red/.test(loc)) {
    $("#tab1,#tab2,#tab3,#tab4").removeClass("h p c").addClass("r");
    $("#tab3, #tab2").removeClass("tail");
    $("#tab4").addClass("tail");
  }
});
});
$("#tab3").click(function(){
$(window).bind("hashchange", function () {
  var loc = window.location.href; // For when Pink tab is clicked
  if(/Pink/.test(loc)) {
    $("#tab1,#tab2,#tab3,#tab4").removeClass("h r c").addClass("p");
    $("#tab3, #tab4").removeClass("tail");
    $("#tab2").addClass("tail"); 
  }
});
});
$("#tab4").click(function(){
$(window).bind("hashchange", function () {
  var loc = window.location.href; // For when Cyan tab is clicked
  if(/Cyan/.test(loc)) {
    $("#tab1,#tab2,#tab3,#tab4").removeClass("h r p").addClass("c");
    $("#tab4").removeClass("tail");
    $("#tab3, #tab2").addClass("tail");
  }
});
});
});

反映后退/前锋的等级变化

2 个答案: