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 回答