[英]Link in page that open a hidden div in another page JS
我搜索并尝试了许多示例,但无法弄清楚
我的问题是我想单击索引中的链接(例如第二个链接),该链接重定向到另一个页面并打开一个隐藏的div。 我试图比较散列并添加differents事件,但是没有用。
的index.html
<div>
<ul>
<li><a href="services.html#page1">link-1</a></li>
<li><a href="services.html#page2">link-2</a></li>
</ul>
</div>
Services.html
<div class="container">
<div class="nav">
<ul id="menu">
<li id="link"><a href="#" data-page="page1"></a></li>
<li id="link"><a href="#" data-page="page2"></a></li>
</ul>
</div>
<div class="main">
<div id="page1" class="content">
Lorem ipsum dolor sit amet 1
</div>
<div id="page2" class="content">
Lorem ipsum dolor sit amet 2
</div>
</div>
</div>
style.css文件
.content { display:none; }
(我尝试使用可见性:也隐藏)
document.Js
$(function() {
var curPage="";
if(!curPage){
$('#page1').show()
curPage = "page1"
}
$("#menu a").click(function() {
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("page");
$("#"+curPage).show();
});
});
我做的最后一件事是在第二页中将散列与div进行比较,并添加一个“显示”类或比较散列,如果其“ page2”单击了导航,则它们没有起作用
if(window.location.hash) {
var hash = window.location.hash.substring(1);
/*i tried a lot here */
} else {
}
您可能将URL锚位置(即services.html#page1
)与jquery / css id选择器(即$('#page1')
)混淆了
URL锚位置唯一要做的就是告诉浏览器,当加载页面时,它需要查找具有指定锚名称的位置并滚动到该位置。 您可以使用它来完成您要尝试的操作,但是您必须修改javascript,以便它抓住锚点位置(尝试使用javascript中的location.hash
),以便可以查看是否应该显示page1或page2。
看来您的javascript函数正确使用了JQuery选择器。 ( $('#page1')
将为您提供id="page1"
的div的引用),但它首先要做的是获取URL位置,然后将curPage设置为page1
或page2
。 然后,如果是page1
,则执行$('#page1').show() and $('#page2').hide()
(如果是page2
反之亦然)
重定向完成后要显示隐藏的div还是重定向之前?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.