0

DIVのセットがあります

1 つの DIV は、最初は .hidden 属性なしで設定され、他のすべての DIV にはそれがあります。

私はそれをSHOWにするDIVを呼び出すHREFのセットを持っています。

「HIDDEN display: none;」の CSS があります。および「表示を表示: ブロック;」

すべての div をループして、選択した div の .hidden 属性を削除し、OLD div の .hidden 属性を配置できるようにしたい...

シンプルですよね？JQ に関する私の知識は限られており、道に沿ってぶつかっています...今のように。

コードは次のとおりです。

<section id='content'>
  <div id='stuff1' class='somestuff hidden'>
      <p>Hello World 1</p>
  </div>
  <div id='stuff2' class='somestuff'>
      <p>Hello World 2</p>
  </div>
  <div id='stuff3' class='somestuff hidden'>
      <p>Hello World 3</p>
  </div>
  <div id='stuff4' class='somestuff hidden'>
      <p>Hello World 4</p>
  </div>
  <div id='stuff5' class='somestuff hidden'>
      <p>Hello World 5</p>
  </div>
</section>

NAV は次のとおりです。

<div id='nav'>
   <a href='#' onclick='changePage(this.id)' id='stuff1'>Click for Content 1</a>
   <a href='#' onclick='changePage(this.id)' id='stuff2'>Click for Content 2</a>
   <a href='#' onclick='changePage(this.id)' id='stuff3'>Click for Content 3</a>
   <a href='#' onclick='changePage(this.id)' id='stuff4'>Click for Content 4</a>
   <a href='#' onclick='changePage(this.id)' id='stuff5'>Click for Content 5</a>    
</div>

そして最後に私が信じているのは機能です：

<script>

        function changePage(currPage)
        {

            $(document).ready(function() {
                $('#' + currPage + 'Page .contentBody').each(function(i, j) {
                    console.log(i); //the i
                    console.log(j); //the div

                    $('#' + currPage + 'Page' + "Page").removeClass('hiddenstuff');
                    $('#' + currPage + 'Page' + "Page").addClass('hiddenstuff');

                });
            });

        }       


</script>

ええ、私はこの機能がいたるところにあることを知っていますが、基本的に、ユーザーが何をクリックするか、いつクリックするか、どれを離れて、どれに行くのかを知るにはどうすればよいですか? うーん？

ありがとう

4

2 に答える 2

0

まず第一に、関数内に document.ready は必要ありません..第二に、 ID は常に一意である必要があります..同じ ID を持つ複数の要素は無効です。

これを試して

<a>ID をdata-id(HTML5 データ属性を使用して)に変更します。これにより、すべての ID が一意になります。

 <a href='#' onclick='changePage(this)' data-id='stuff1'>Click for Content 1</a>

およびJavaScript（jquery）

function changePage(currObj)
{
   $('.somestuff').addClass('hidden'); 
   $('#' + $(currObj).data('id')).removeClass('hidden');

}

somestuffクラスがすべてのdivに存在することを考慮してください。すべてのdivに共通のクラスを追加しない場合は、クラスセレクターを使用してください..

于 2013-10-21T17:44:26.907 に答える
0

通常、この種の作業はアンカー タグの href を使用して行われるため、JavaScript 以外の環境では適切に機能を低下させることができます。

第 2 に、アンカー タグの ID を渡すのではなく、href を渡してはどうでしょうか? または、私たちがそれをしている間、this完全に合格してください。また、ページ ジャンプを防止できるように、changePage からの応答を返す必要があります。

<a href='#stuff1' onclick='return changePage(this)'>Click for Content 1</a>
<a href='#stuff2' onclick='return changePage(this)'>Click for Content 2</a>
<a href='#stuff3' onclick='return changePage(this)'>Click for Content 3</a>

これで、コンテンツ div id から「ページ」を削除できます。

<section id='content'>
  <div id='stuff1' class='somestuff hidden'>
      <p>Hello World 1</p>
  </div>
  <div id='stuff2' class='somestuff'>
      <p>Hello World 2</p>
  </div>
  <div id='stuff3' class='somestuff hidden'>
      <p>Hello World 3</p>
  </div>
  <div id='stuff4' class='somestuff hidden'>
      <p>Hello World 4</p>
  </div>
  <div id='stuff5' class='somestuff hidden'>
      <p>Hello World 5</p>
  </div>
</section>

すべてが整っていると、JavaScript は次のようになります。

function changePage(el) {
    var target = $(el).attr("href"); // using jQuery to avoid an IE inconsistency
    $(target).show().siblings().hide();
    // prevent page jump
    return false;
}

シンプルですよね？もっと簡単にできます。

<a href='#stuff1' class="changepage">Click for Content 1</a>
<a href='#stuff2' class="changepage">Click for Content 2</a>
<a href='#stuff3' class="changepage">Click for Content 3</a>

そしてjs：

$(document).ready(function(){
    $(".changepage").click(function(){
        var target = $(this).attr("href"); // using jQuery to avoid an IE inconsistency
        $(target).show().siblings().hide();
        // prevent page jump
        return false;
    });
});

最初に述べたようにこれを劣化させるには、.hidden div を示すインライン スタイルを含むスクリプトなしタグを追加します。

于 2013-10-21T17:54:06.760 に答える