如何显示使用网址的隐藏div [英] How to show hidden div using url

问题描述

我在做一个有3个部分的小页面。虽然1节显示其他被隐藏。当页面加载时，显示欢迎部分，而其他部分设置为display：none。单击其他页面的菜单按钮显示所需的部分并隐藏所有其他部分;我使用jQuery来做到这一点。不幸的是，现在我遇到的问题，我无法使一个url去具体部分。通常，要转到未隐藏的页面部分，我只需创建一个锚点，名称为XXX，然后在该网页的网址末尾添加#XXX，但在隐藏的div上执行此操作不会

$ b

 < div id =menu> 
< p>< a href =＃id =menu-home>首页< / a>< / p& 
< p>< a href =＃id =menu-page1>第1页< / a>< / p& 
< p>< a href =＃id =menu-page2>第2页< / a>< / p& 
< / div> 
 
< div id =home> 
< h1>欢迎！< / h1> 
< p>这是所有首页的内容都会显示的地方< / p> 
< / div> 
< div id =page1> 
< h1>第1页< / h1> 
< p>第1页内容在这里< / p> 
< / div> 
< div id =page2> 
< h1> Page 2< / h1> 
< p> Page 2内容在这里< / p> 
< / div> 
  

css：

 code>＃page1 {
 display：none; 
} 
＃page2 {
 display：none; 
} 
  

js：

  $（document）.ready（function（）{
 $（'＃menu-home）.click（function（）{
 $（' ）.show（'fast'）; 
 $（'＃page1'）。hide（'fast'）; 
 $（'＃page2'）。 b'）; 
 $（'＃menu-page1）.click（function（）{
 $（'＃page1'）。 home'）。hide（'fast'）; 
 $（'＃page2'）。hide（'fast'）; 
}）; 
 $（'＃menu- page2）。 click（function（）{
 $（'＃page2'）。show（'fast'）; 
 $（'＃home'）。hide（'fast'）; 
 $ '＃page1'）。hide（'fast'）; 
}）; 
}）; 
  

解决方案

您可以使用 window.location.hash *

为了这个工作，你应该给你< a> 标记一些正确的哈希值：

 < p>< a href =＃page1id =menu-page1 >第1页< / a>< / p> 
< p>< a href =＃page2id =menu-page2>第2页< / a>< / p& 
  

并检查提到的字符串是否匹配给定的页面：

  $（document）.ready（function（）{
 //将点击事件绑定到元素
 
 var locationHash = location.hash.substring（1）; 
 if（locationHash =='page1'）{
 $（'＃menu-page1'）。trigger（'click'）; 
} else if（locationHash =='page2'）{
 $（'＃menu-page2'）。trigger（'click'）; 
} 
}）; 
  

你看到我使用了点击事件快速快速解决方案， code> location.hash 以摆脱＃。

当然这是可以改进的。例如

*请参阅 Location 作为window.location是一个 Location hash 属性

I'm making a small page that has 3 sections. While 1 section is showing the others are hidden. When the page loads the welcome section is displayed, while the other sections are set to display:none. Clicking the menu button for the other pages shows the desired section and hides all the others; I am using jQuery to do that. Unfortunately, now I come across the problem that I'm unable to make a url to go to the specific section. Usually, to go to a section of a page that is not hidden, I would just create an anchor and name is XXX, and then add #XXX at the end of that page's url, but doing this on a hidden div doesn't make the div show.

Any suggestions?

html:

<div id="menu">
    <p><a href="#" id="menu-home">Home</a></p>
    <p><a href="#" id="menu-page1">Page 1</a></p>
    <p><a href="#" id="menu-page2">Page 2</a></p>
</div>

<div id="home">
    <h1>Welcome!</h1>
    <p>This is where all the home page stuff will go</p>
</div>
<div id="page1">
    <h1>Page 1</h1>
    <p>Page 1 content here</p>
</div>
<div id="page2">
    <h1>Page 2</h1>
    <p>Page 2 content here</p>
</div>

css:

#page1 {
    display:none;    
}
#page2 {
    display:none;
}

js:

$(document).ready(function(){
    $('#menu-home).click(function(){
        $('#home').show('fast');
        $('#page1').hide('fast');
        $('#page2').hide('fast');
      });
    $('#menu-page1).click(function(){
        $('#page1').show('fast');
        $('#home').hide('fast');
        $('#page2').hide('fast');
      });
    $('#menu-page2).click(function(){
        $('#page2').show('fast');
        $('#home').hide('fast');
        $('#page1').hide('fast');
      });
});

解决方案

You could use window.location.hash* which will return the corresponding part of the url.

For this to work you should give your <a> tags some proper hash value:

<p><a href="#page1" id="menu-page1">Page 1</a></p>
<p><a href="#page2" id="menu-page2">Page 2</a></p>

And check the mentioned string whether it matches a given page:

$(document).ready(function(){
    //binding click events to elements

    var locationHash = window.location.hash.substring(1);
    if(locationHash == 'page1'){
      $('#menu-page1').trigger('click');
    }else if(locationHash == 'page2'){
      $('#menu-page2').trigger('click');
    }
});

You see I used the click-events for a fast quick-n-dirty solution and also substringed location.hash to get rid of the #.
Of course this is open for improvement .e.g. not hiding page1 or page2 at all on page load if a given hash is found.

*See the linked document for Location as window.location is a Location object which holds a hashproperty

这篇关于如何显示使用网址的隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！