反映类别的更改以反向/向前 [英] Reflecting changes in class for back/forward

问题描述

首先，为长期问题道歉。我真的是一个新手，特别是。使用javascript& jQuery。

First off, apologies for the long question. I'm really a newbie, esp. with javascript & jQuery.

我使用jQuery Address，并且基于我的导航标签示例（也基于jQuery UI）。我有四个按钮（ids tab1，tab2，tab3& tab4），它们应该看起来重叠（或有一个尾），取决于活动的选项卡。因此，每个的背景图像相应地改变（取决于类h，r，p& c）。

I'm using jQuery Address and have based my navigation on the tabs example (also based on the jQuery UI). I have four buttons (with ids tab1, tab2, tab3 & tab4), and they are supposed to appear to overlap (or have a "tail") depending on the active tab. Hence, the background images of each change accordingly (depending on classes 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>

以下是我尝试的初始代码，如果只点击按钮，看起来不错。

The following is the initial code I tried, which looks great if only the buttons are clicked. However, if the user goes back/forward, the class remains what it was when last clicked.

$(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，应更改类，以更准确地添加和删除类在链接，但没有工作到目前为止。下面是我试过的代码示例：

I'm looking for something similar to history for class changes. I've tried codes that are supposed to change classes when the URL changes and codes that find if the parent contain the class "ui-state-active" or "ui-tabs-selected" with the purpose of more accurately adding and removing classes in the links but neither have worked thus far. Here's an example of code I've tried:

$(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 Address冲突，错误或错过了另一个潜在的解决方案。

I don't know if there might be a conflict with the jQuery Address, or I'm typing things wrong, or missing another potential solution.

如果任何人都能引导我朝正确的方向，我会非常感激。

If anyone can lead me in the right direction, I'd be very grateful. Also, if you need more code to help you help me, I'd be more than happy to supply it.

推荐答案

我也很乐意为您提供帮助已经能够使以下代码工作（虽然对于看起来像重复代码很长时间）：

I've been able to make the following code work (although it is long for what seems like repetitive code):

$(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");
  }
});
});
});

这篇关于反映类别的更改以反向/向前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！