インデックス ページでは、タブ 2 をクリックすると、カテゴリ ページのヘッダー タブ 2 をクリックしたときと同じように、コンテンツが表示されることがわかります。インデックス ページを開いて、タブ コンテンツを表示する必要があります。
誰かが私の解決策を教えてくれたら、どうもありがとう。
ここのようなハッシュロジックを構築する必要があります
そして、 /category.html#tab3 のようにリンクできます
単純なハッシュ コード ロジックを作成する必要があります。以前に作成したライブ デモをここで見ることができます http://wbs.walkover.in/branding.php#custom または、このコードを試すことができます
$(document).ready(function() {
if(window.location.hash){changeProduct();}
$(window).bind('hashchange',function(){changeProduct();});
});
function changeProduct(){
var val = window.location.hash.substring(1)
switch(val)
{
case 'custom':
$('.accclk').removeClass('active');
$("#cst").addClass('active')
$('.dnon').hide();
$("#custom").show();
break;
case 'online':
$('.accclk').removeClass('active');
$("#oln").addClass('active')
$('.dnon').hide();
$("#online").show();
break;
case 'product':
$('.accclk').removeClass('active');
$("#prd").addClass('active')
$('.dnon').hide();
$("#product").show();
break;
case 'solution':
$('.accclk').removeClass('active');
$("#sol").addClass('active')
$('.dnon').hide();
$("#solution").show();
break;
}
}
2 つのソリューションがあります。
window.open
。例を次に示します。カテゴリページにアクセスしたい場合は$('#cat_id').html('text');
、目次ページから で呼び出すことができますwindow.opener.$('#cat_id').html('text2');
。
setInterval
作成し、JS 関数で XML ファイルの変更を確認するナビゲーションのボタンをクリックするとコンテンツが動的に読み込まれる Web サイトを作成したいとします。有機タブのようなもので、コンテンツのみが動的に読み込まれます。HTML が次のようなものだとします。
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>
jQuery JavaScript
ここで楽しいのは JavaScript です。これは平易な英語での計画です:
では、なぜ「ハッシュタグ」の変更に煩わされるのでしょうか? いくつかの理由:
Ben Alman による hashchange イベント プラグインを使用することで、ブラウザーの戻る/進むボタンを有効にできます。最新のブラウザーは、hashchange イベントを単独でサポートしています。このプラグインは、古いブラウザーのサポートを有効にします。ページが読み込まれるときにハッシュを探して、適切なページを読み込むことができます (つまり、「ディープ リンク」)。
前提条件
jQuery ライブラリと onhashchange プラグインを使用し、最後に独自のスクリプトをロードします。
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
コードダンプ
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function() {
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent.find("#guts").fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href='" + newHash + "']").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});