Javascript 使用jquery创建导航页面_Javascript_Jquery_Html

Javascript 使用jquery创建导航页面

javascript jquery html

Javascript 使用jquery创建导航页面,javascript,jquery,html,Javascript,Jquery,Html,事实上，我并不知道如何表达问题的标题，但下面是描述。假设我使用jQuery显示/隐藏堆叠在一起（绝对位置）的uls。例如： <ul id="one"> <li>blah</li> <li>blah2</li> </ul> <ul id="two"> <li>blah</li> <li>blah2</li> </ul> 使用jQuery

事实上，我并不知道如何表达问题的标题，但下面是描述。假设我使用jQuery显示/隐藏堆叠在一起（绝对位置）的

ul

s。例如：

<ul id="one">
  <li>blah</li>
  <li>blah2</li>
</ul>

<ul id="two">
  <li>blah</li>
  <li>blah2</li>
</ul>

使用jQuery代码：（我正在使用jQuery循环插件）

问题：

在我的站点中，我有几个页面，我想指向第二个

ul

，因此当单击时，它会将它们带到包含所有

ul

的页面，但只会显示第二个页面。如果此人进入页面，首先显示默认的

ul

，然后单击“下一步”进入下一个

ul

，情况也一样。我只是想知道是否可以避免按“下一步”，直接将用户带到页面，并显示第二个

ul

。

如果我理解正确，也许您可以通过一个每页具有唯一id的换页来实现这一点？您可以使用JS或服务器端逻辑交换id，具体取决于您要做的事情

<div id="page-one">
    <ul id="one">
      <li>blah</li>
      <li>blah2</li>
    </ul>

    <ul id="two">
      <li>blah</li>
      <li>blah2</li>
    </ul>
</div>



废话
废话


废话
废话

然后你的css将是

#第一页#第一页{显示：块}#第二页#一{显示：无}等等。
我认为您可以使用URL中的哈希标记。然后，您可以像这样编写if语句：
 if(location.hash === "#2"){
     $("#one").hide();
 }else{
     $("#two").hide();
 }

或直接作为复制粘贴示例：
<html>
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
    if(location.hash === "#2"){
        $("#one").hide();
    }else{
        $("#two").hide();
    }
    $('#mybutton').click(function(e) { 
        $("ul").toggle(); //quick n dirty! only works with 2 lists :)
        e.preventDefault();
    });
});
</script>
<body>
<a href="#" id="mybutton">My button</a>

<ul id="one">
  <li>First Item!</li>
  <li>blah</li>
  <li>blah2</li>
</ul>

<ul id="two">
  <li>Second Item!</li>
  <li>blah</li>
  <li>blah2</li>
</ul>

<a href="#2">To second page (you might have to refresh, notice the #2 at the end of the url!)</a>
</body>
</html>


$（函数（）{
if（location.hash==“#2”）{
$（“#一”）.hide（）；
}否则{
$（“#两”）.hide（）；
}
$（“#mybutton”）。单击（函数（e）{
$（“ul”）.toggle（）；//quick n dirty！仅适用于2个列表：）
e、 预防默认值（）；
});
});

第一项
废话
废话


第二项
废话
废话



还要注意，我插入了一个e.preventDefault（）
在#mybutton
的click listener中，以防止URL在单击时重新更改。
然后我如何导航到页面并拥有#第二页显示块？使用jQuery，您只需执行$（'body'）.attr（'id'，'page two'）或者你可以通过不同的HTML或者通过切换服务器端变量的值来重新加载页面并处理包裹id的更改。我的意思是，我理解你的意思，我只是有点不确定如何处理这种情况。。。假设所有这些ul
s都位于page1.html，而您位于page-x.html。如果只转到page1.html，默认情况下会显示第一个div。现在您在page-x.html上，有一个链接希望将您带到page1.html，尽管显示的是第二个div而不是第一个div。也许链接可以指向page1.html/#second或soemthing，这将调用JS“单击”下一步按钮？是的，您可以使用哈希（参见下面的yoshi示例）。从我的角度看，这听起来像是你正在走向UX痛苦（状态不明…如果我作为一个用户想看到\1？），但这会奏效。
 if(location.hash === "#2"){
     $("#one").hide();
 }else{
     $("#two").hide();
 }

<html>
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
    if(location.hash === "#2"){
        $("#one").hide();
    }else{
        $("#two").hide();
    }
    $('#mybutton').click(function(e) { 
        $("ul").toggle(); //quick n dirty! only works with 2 lists :)
        e.preventDefault();
    });
});
</script>
<body>
<a href="#" id="mybutton">My button</a>

<ul id="one">
  <li>First Item!</li>
  <li>blah</li>
  <li>blah2</li>
</ul>

<ul id="two">
  <li>Second Item!</li>
  <li>blah</li>
  <li>blah2</li>
</ul>

<a href="#2">To second page (you might have to refresh, notice the #2 at the end of the url!)</a>
</body>
</html>