0

私はウェブサイトを開発していますが、次の問題に遭遇しました。

私のサイトは 4 つのページで構成されており、そのすべてがページのメニュー バーに基づいて非表示および表示される css div にすぎません。

これが私の例です：http://jsfiddle.net/DcwUu/

HTML:

<button class="home-button">Home</button>
<button class="download-button">Download</button>
<button class="about-button">About</button>
<button class="contact-button">Contact</button>

<div class="home-container">
    <div class="left-corner"></div>
    This is the home page!
</div>

<div class="download-container">
    <div class="left-corner"></div>
    This is the download page!
</div>
<div class="about-container">
    <div class="left-corner"></div>
    This is the about page!
</div>
<div class="contact-container">
    <div class="left-corner"></div>
    This is the contact page!
</div>

jQuery:

$('.home-button').click(
    function(){
        $('.home-container').show();
        $('.download-container').hide();
        $('.about-container').hide();
        $('.contact-container').hide();
    }
);
$('.download-button').click(
    function(){
        $('.download-container').show();
        $('.about-container').hide();
        $('.contact-container').hide();
        $('.home-container').hide();
    }
);
$('.about-button').click(
    function(){
        $('.about-container').show();
        $('.contact-container').hide();
        $('.download-container').hide();
        $('.home-container').hide();        
    }
);
$('.contact-button').click(
    function(){
        $('.contact-container').show();
        $('.home-container').hide();       
        $('.download-container').hide();
        $('.about-container').hide();
    }
);

CSS:

.download-container {display:none;}
.about-container {display:none;}
.contact-container {display:none;}
.home {display:block;}

私のメインページは index.php で、localhost/mysite/index.phpに行くことでアクセスできます

リンクをクリックして div を表示/非表示にすると、URL がlocalhost/mysite/index.php#に変わります

URL で 4 つの「ページ」に直接アクセスする方法が見つからないようです。

ありがとう！

4

2 に答える 2

4

貧乏人のやり方は次のようになります。

var hash = window.location.hash.slice(1);
$('.page').hide();
$('#' + hash).show();

したがって、このようなページが与えられた場合、

<div class="page" id="main"></div>
<div class="page" id="foo"></div>
<div class="page" id="bar"></div>
<div class="page" id="baz"></div>

ユーザーが にアクセスするlocalhost/mysite/#fooと、fooページが表示されます。

于 2013-09-26T21:04:14.020 に答える
1

直接アクセスするには、URL でハッシュを見つけます。

var hash = window.location.hash
$(hash).show();

この値に応じて、正しい div を表示します。

ロードされたページの変更については、ハッシュへの変更をリッスンします。jQuery は気の利いhashchangedたイベントを提供します。

$(window).on('hashchange', function() {
  .. work ..
});

このイベント内で、に格納する必要があるハッシュを抽出しますwindow.location.hash。その値に応じて、対応する div 要素を表示/非表示にします。

この簡単な例を参照してください: http://jsfiddle.net/aUsHh/3/

于 2013-09-26T21:04:02.503 に答える