それぞれが jQuery タブを持つ複数のページを使用しています。Page1.html に #tab1 と #tab2 があり、Page2.html に #tab3 と #tab4 があるとします。私のコードには次の問題があります。
1) タブ コンテンツ内で、Page1.html#tab2 には Page1.html#tab1 へのハイパーリンクがあります。リンクが機能しません。リンクをクリックすると、ページは #tab1 にとどまります。ただし、ページ 1 のメニュー コンテナー内の #tab1 へのハイパーリンクは機能します。どちらのハイパーリンクも同じ a href="#tab1" を使用していますが、なんらかの理由で、Page1.html#tab1 にリンクすると、Page1.html#tab2 コンテンツの外側のリンクのみが機能します。メニュー コンテナ内のハイパーリンクは常に機能します。
2) www.Page1.html#tab2 へのハイパーリンクを誰かに送信すると、ページ URL は www.Page1.html と表示され、タブ 1 が表示されます。つまり、タブに直接リンクすることはできません。ただし、Web サイトのメニューは正しくタブにリンクしています。Page1.html を参照しているときに Page2.html#tab3 のメニュー リンクをクリックすると、タブが正しく読み込まれ、URL に Page2.html#tab3 が表示され、ページで #tab4 をクリックしてもそのまま残ります。URL は、メニューのハイパーリンクをクリックして別のページ (Page1.html#tab1 から Page2.html#tab3 など) に移動した場合にのみ変更されます。Page2.html#tab4 で Page2.html#tab3 をクリックすると、タブのコンテンツは正しく #tab3 に変更されますが、URL は Page2.html#tab4 のままです。
私が欲しいもの:
A) リンクを直接タブに送信できるようにするため。www.Page1.html#tab2 へのリンクを誰かに送信すると、最初のタブが表示された URL www.Page1.html として常に読み込まれます。ただし、ページ上のメニュー ハイパーリンクは機能します。
B) リンクがタブ コンテンツ内にある場合、同じページのタブ間でリンクできるようにするため。たとえば、Page1.html#tab1 のコンテンツ内のリンクは、Page1.html#tab2 にリンクできる必要があります。現時点では、Page1.html#tab1 のコンテンツ内のリンクが Page2.html#tab3 のような別のページのタブにリンクしている場合にのみ機能します。
C) ** EXTRA CREDIT ** : タブを直接クリックすると、タブの画像が「ポップ」アウトし、以前に選択したタブが「ポップ解除」します。タブへのメニュー ハイパーリンクをクリックすると、新しく選択したタブの正しいコンテンツが表示されていても、前のタブがポップアウトされたままになります。または、メニュー リンクを使用して新しいページのタブに移動する場合、タブは「ポップ」アウトしませんが、正しいタブ コンテンツが表示されます。上記の問題を修正すると、この問題も解決すると思います。
これが私のコードです：
<script type="text/javascript">
$(document).ready(function() {
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
$(function () {
$('a[href^="#"]').click(function(e){
e.preventDefault();
$('html,body').scrollTop($(this.hash).offset().top - 50);
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var tabContents = $(".tab_content").hide(),
tabs = $("ul.tabs li, .rgtPanelBox ul li"); // Second selector to match left hand sidebar
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
else {
tabs.first().addClass("active").show();
tabContents.first().show();
}
tabs.click(function() {
var $this = $(this),
activeTab = $this.find('a').attr('href');
if(!$this.hasClass('active') && activeTab.length > 1 && activeTab.indexOf('#') === 0){
$this.addClass('active').siblings().removeClass('active');
tabContents.hide().filter(activeTab).fadeIn();
}
return;
});
});
</script>
とにかく、私は非常に初心者なので、提供するコードが優れているほど、あなたの答えが正しいと簡単に承認できます。:)
ありがとう！