1

インデックス ページでは、タブ 2 をクリックすると、カテゴリ ページのヘッダー タブ 2 をクリックしたときと同じように、コンテンツが表示されることがわかります。インデックス ページを開いて、タブ コンテンツを表示する必要があります。

誰かが私の解決策を教えてくれたら、どうもありがとう。

目次ページ
カテゴリーページ

4

4 に答える 4

0

ここのようなハッシュロジックを構築する必要があります

そして、 /category.html#tab3 のようにリンクできます

于 2012-12-18T11:20:11.347 に答える
0

単純なハッシュ コード ロジックを作成する必要があります。以前に作成したライブ デモをここで見ることができます 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;
        }

}
于 2012-12-18T11:48:35.007 に答える
0

2 つのソリューションがあります。

  • 親から子にアクセスできるようにするために、ページの1つを別の子にしますwindow.open 。例を次に示します。

カテゴリページにアクセスしたい場合は$('#cat_id').html('text');、目次ページから で呼び出すことができますwindow.opener.$('#cat_id').html('text2');

  • 共有 XML ファイルを setInterval作成し、JS 関数で XML ファイルの変更を確認する
于 2012-12-18T10:39:38.127 に答える
0

ナビゲーションのボタンをクリックするとコンテンツが動的に読み込まれる 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 です。これは平易な英語での計画です:

  • ナビゲーションボタンをクリックすると...
  • URLのハッシュタグを変更する
  • URLのハッシュタグが変わると…
  • 古いコンテンツをフェードアウトする
  • 新しいコンテンツを読み込んでフェードインする
  • 現在のナビゲーションの強調表示を更新します

では、なぜ「ハッシュタグ」の変更に煩わされるのでしょうか? いくつかの理由:

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

});​
于 2012-12-18T11:33:47.907 に答える