Reflecting changes in class for back/forward

问题:

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

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;
})
});

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

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.

回答1:

You have to make a function that selects the tabs for you and then call it from $.address.change event.

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

回答2:

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