jquery - Hash to hide div - 直接访问页面URL

标签 jquery css url html hash

<分区>


关闭 9 年前

  • 要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么它们不起作用,以及预期结果。另请参阅:Stack Overflow question checklist
  • 关于您编写​​的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SSCCE.org寻求指导。

我正在开发一个网站,但遇到了以下问题。

我的网站由 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 个“页面”中任何一个的方法。

谢谢!

最佳答案

穷人的做法是这样的:

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 页面将可见。

关于jquery - Hash to hide div - 直接访问页面URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19038609/

上一篇:html - float div 之间的边距自动

下一篇:css - 你如何将div float 到左边?

相关文章:

javascript - 替代在 url 中使用 hashbangs 来解决 IE9 问题

javascript - 尝试编写一个 Javascript 类来处理动态添加更多数据到我的 HTML 中。需要一些指导

jquery - 在联系表单中使用 select2 但 css 技巧不起作用

php - 无法在 php echo 中对齐 css - jquery 不工作

javascript - 如何更改 JS 中的字体大小以适合其容器?

快速 cookies urlsession 请求

ios - 从 Swift 中的 URL 中删除所有路径组件

javascript - 如何优化jQuery标签:contains() selector?

新页面加载后的 jQuery 单击事件

css - 使用 nth :child 将 CSS 声明应用于多个元素