Question

我实际上并不知道如何标出问题标题，但这里是描述。假设我使用jQuery显示/隐藏彼此堆叠的ul（绝对定位）。例如：

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

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

我有一个控制器按钮，按下时，只需更改这些ul的z-index。控制器按钮就是：

<a href="#" id="mybutton">My button</a>

使用jQuery代码:(我正在使用jQuery循环插件）

$('#mybutton').click(function() { 
  // check which ul is currently shown
  // change z-index, so that the next ul is to be shown
});

问题：

在我的网站中，我有几个页面，我想指向第二个 ul，因此点击后，它会将它们带到包含所有内容的页面ul s，但只会显示第二个。如果此人访问该页面，显示默认的ul，然后点击“下一步”继续下一个ul，则会相同。我只是想知道是否可以避免按“下一步”，只需将用户直接带到页面并显示第二个ul。

Answer 1

如果我理解正确，也许您可以通过每页唯一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将是#page-one #one { display:block }; #page-two #one { display : none };等。

Answer 2

我认为你可以使用URL中的hash-tag。然后你可以这样写一个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>

另请注意，我已在e.preventDefault();的点击监听器中插入了#mybutton，以防止在点击时更改网址。

使用jquery创建导航页面

2 个答案: