1

まず、長い質問をお詫びします。私は本当に初心者です、特に。JavaScriptとjQueryを使用。

私はjQuery Addressを使用しており、ナビゲーションはタブの例に基づいています(これもjQuery UIに基づいています)。4 つのボタン (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

次のコードを機能させることができました (反復コードのように見えるものには長いですが)。

$(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 に答える
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 に答える