我在做一个有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
发布评论