链接在另一页面中打开隐藏div的页面JS

时间:2018-02-05 18:02:49

标签: javascript jquery html css

我搜索并尝试了很多例子,但我无法弄清楚

我的问题是我想在我的索引中点击一个链接(例如第二个),该链接重定向到另一个页面并打开一个隐藏的div。 我正在尝试比较哈希并添加不同的事件,但它没有用。

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();
            });     
        });

我做的最后一步是将第二页中的hash与div进行比较并添加一个'show'类或比较哈希值,如果它的“page2”点击导航但是它们没有工作

if(window.location.hash) {
      var hash = window.location.hash.substring(1);
    /*i tried a lot here */
  } else {
  }

2 个答案:

答案 0 :(得分:1)

您可能会将URL锚点位置(即services.html#page1)与jquery / css id选择器混淆(即$('#page1')

URL锚点位置唯一做的是告诉浏览器,当它加载页面时,它需要找到具有指定锚名称的位置并滚动到它。您可以使用它来完成您正在尝试的操作,但是您必须修改您的javascript以便抓取锚点位置(在javascript中尝试location.hash)以便您可以查看是否应该显示page1或page2 。

看起来你的javascript函数正在使用JQuery选择器。 ($('#page1')将为您提供对id="page1")的div的引用,但它应该首先抓住网址,然后将curPage设置为page1page2 。然后,如果page1 $('#page1').show() and $('#page2').hide()执行page2(反之亦然list_in.count(any(c_umi in s_list for s_list in list_in))

答案 1 :(得分:0)

是在重定向完成之后你要显示隐藏的div还是重定向之前?