如何通過循環的div沒有用戶查看哪些知識，他們希望查看

Question

我有一組的DIV

一個DIV的初始設置，而不.hidden屬性的所有其他有它的東西。

我有一套HREF的調用DIV，將使它顯示。

我有一個「HIDDEN display：none;」的css文件。和「SHOW顯示：塊;」

我希望能夠遍歷所有的div，刪除.hidden屬性選定股利和放置.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> 

是的，我知道這個功能是所有但在本質上，我怎麼知道用戶會點擊什麼，以及他們什麼時候做，他們做了哪一個他們離開，他們要去哪個？ Hmmmmm？

感謝

Answer 1

通常，這種工作是通過使用錨標記的href完成的，以便它可以在非JavaScript環境中優雅地降級。

其次，而不是傳遞錨標記的id，爲什麼不通過href，因爲它現在在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的「Page」。

<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。

Answer 2

首先你不需要的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並使用類選擇器。