1

質問のタイトルの言い方がよくわからなかったのですが、ここに説明があります。jQuery を使用してul、互いの上に積み重ねられた (絶対配置された) s を表示/非表示にするとします。例えば：

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

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

コントローラー ボタンを押すと、これらulの s の z インデックスが変更されるだけです。コントローラーのボタンは文字通り次のとおりです。

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

質問：

私のサイトには、 2 番目 の を参照したいページがいくつかありulます。クリックすると、すべての が含まれるページに移動しますが、 2 番目ulのページのみが表示されます。ユーザーがページに移動し、最初にデフォルトが表示され、次に「次へ」をクリックして次のページに進む場合も同じです。「次へ」を押すのを避けて、ユーザーを直接ページに移動させて、2番目のページを表示することができるかどうか疑問に思っています。ululul

4

2 に答える 2

1

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>
​&lt;/body>
</html>

e.preventDefault();また、クリック時に URL が元に戻るのを防ぐために、 at#mybuttonのクリック リスナーを挿入したことにも注意してください。

于 2012-09-15T14:21:11.337 に答える
1

私があなたを正しく理解していれば、ページごとに一意の ID を持つページラップを介してこれを達成できるでしょうか? 何をしようとしているかに応じて、id を JS またはサーバー側のロジックと交換できます。

<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 };などになります。

于 2012-09-15T14:05:17.933 に答える