1

首先，为这个冗长的问题道歉。我真的是一个新手，尤其是。使用 javascript 和 jQuery。

我正在使用 jQuery Address 并基于选项卡示例（也基于 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;
})
});

我正在寻找类似于历史的东西来进行班级变更。我尝试了在 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 地址发生冲突，或者我输入错误，或者错过了另一个潜在的解决方案。

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

4

2 回答 2

0

您必须创建一个为您选择选项卡的函数，然后从 $.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
});
于 2012-06-13T07:41:00.337 回答
0

我已经能够使以下代码工作（尽管看起来重复的代码很长）：

$(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");
  }
});
});
});
于 2012-06-14T03:01:03.400 回答