切換顯示隱藏多個div

Question

好吧，所以我有多個div（7），我想要切換顯示隱藏。如果一個div打開，應該隱藏，當我打開一個新的div時，其他人應該隱藏。我已經能夠與下面片的jquery

function showDivs() { 
    $(".head").click(function() { 
     $(".Content").hide(); 
     $(this).next().fadeIn("slow"); 

    }) 
} 

的其中.head是每個格報頭和.Content爲div的類來實現此目的。我已經得到它的工作完美，通過呼籲showDivs()從.head()現在的問題是，在我的頁面左側，我有ul li設置。我有7 li項目，這對應於7個div。我的意思是點擊第一個li相應的div應該打開，其他人應該隱藏，並在點擊第二li第二div應該打開，其他人隱藏。

有沒有人有一個想法如何讓這些div隱藏在左邊li項目的動作上。我知道我必須通過showDivs()的參數，但不知道如何？

幫助表示讚賞

Answer 1

我相信這就是.index()進場：

$(function() { 
    $('ul li').each(function() { 
     $(this).click(function(e) { 
      var i = $(this).index(); 
      $('div').hide(); 
      $('div:eq('+i+')').show(); 
     }); 
    }); 
}); 

這是一個非常基本的標記，但我相信你可以找出如何使它與你的代碼一起工作。希望我幫助！

http://jsfiddle.net/Z3Hj7/

編輯：看過你的小提琴後，我覺得我的工作了，你想要什麼：

$(function() { 
    $('ul li').each(function() { 
     $(this).click(function(e){ 
      e.preventDefault(); 
      var i = $(this).index(); 
      $('.content').hide(); 
      $('.head:eq('+i+')').next().show(); 
     }); 
    }); 
}); 

看看小提琴：http://jsfiddle.net/DTcGD/25/

Answer 2

如果給李的和相應的div相同class，那麼你可以這樣說

function showDivs() { 
$("li").click(function() { 
    $(".Content").hide(); 
    clickedID = $(this).attr("class"); 
    $('div#'+clickedID).fadeIn("slow"); 

}) 

}

Answer 3

如何asigning一個ID，每個列表項目和一個對應的ID到每個物品容器。因此，您的列表項目的ID爲「item01」..「item07」，您的內容容器的ID爲「item01c」..「item07c」。然後，你可以做somehing這樣的：

$("li").click(function() { 
    showDivs($(this).attr("id")); 
}) 

function showDivs(callerId) { 
    $(".content").hide(); 
    $(".content", "#" + callerId + "c").fadeIn(); 
} 

工作實例可以在這裏看到：http://jsfiddle.net/ECbkd/5/1

Answer 4

如果我正確理解你的HTML結構，它看起來大約是這樣的：

<!-- The list... --> 
<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
</ul> 

<!-- The divs -- note I've assumed there's a container... --> 
<div id="container"> 
    <div class="head">Header One</div> 
    <div class="Content">Content One</div> 
    <div class="head">Header Two</div> 
    <div class="Content">Content Two</div> 
    <div class="head">Header Three</div> 
    <div class="Content">Content Three</div> 
    <div class="head">Header Four</div> 
    <div class="Content">Content Four</div> 
</div> 

。只有七項而不是四項。

如果是這樣，這將做到這一點（live copy）：

jQuery(function($) { 

    $(".Content").hide(); 

    $("li").click(function() { 
    showDivs($("#container div.head:eq(" + $(this).index() + ")")); 
    }); 
    $(".head").click(function() { 
    showDivs($(this)); 
    }); 

    function showDivs(head) { 
    $(".Content").hide(); 
    head.next().fadeIn("slow"); 
    } 

}); 

在那裏，我暗中與該列表的標題，通過他們在其容器的位置。因此，第一個li與第一個div有關，其中class =「head」，第二個到第二個，等等。我通過使用index來知道哪個li被點擊，然後使用:eq查找相關的div.head。

從結構上而不是使用id值來進行維護更容易。

<ul> 
    <li data-div="h1">One</li> 
    <li data-div="h2">Two</li> 
    <li data-div="h3">Three</li> 
    <li data-div="h4">Four</li> 
</ul> 
<div id="container"> 
    <div id="h1" class="head">Header One</div> 
    <div class="Content">Content One</div> 
    <div id="h2" class="head">Header Two</div> 
    <div class="Content">Content Two</div> 
    <div id="h3" class="head">Header Three</div> 
    <div class="Content">Content Three</div> 
    <div id="h4" class="head">Header Four</div> 
    <div class="Content">Content Four</div> 
</div> 

然後（live copy）：

jQuery(function($) { 

    $(".Content").hide(); 

    $("li").click(function() { 
    showDivs($("#" + $(this).attr("data-div"))); 
    }); 
    $(".head").click(function() { 
    showDivs($(this)); 
    }); 

    function showDivs(head) { 
    $(".Content").hide(); 
    head.next().fadeIn("slow"); 
    } 

}); 

data-* attributes是作爲有效的交替，不過，你可以通過給每個li一個data-div屬性與相關div的id的價值做HTML5，但所有瀏覽器都支持它們。 （該data-*事情是編纂和統治人們的使用無效的屬性，給他們一個有效的方式做到這一點，而不與將來增加的規範衝突的企圖。）

Answer 5

如果你想使用的.index（）由有人建議較早，那麼我相信這將是最簡單的方法（看看這裏http://jsfiddle.net/ECbkd/7/）：

$("li").click(function() { 
    $(".content").hide(); 
    $('.item').eq($(this).index()).children('.content').fadeIn(); 
}) 

你可以添加這是能夠在頭clickin時也展現內容：

$("h2", ".container").click(function() { 
    $(".content").hide(); 
    $(this).parent().children('.content').fadeIn(); 
}) 

*編輯開始* 爲了讓上點擊內容切換按鈕，標題使用這樣的：

$("h2", ".container").click(function() { 
    $(".content").not($(this).parent().children('.content')).hide(); 
    $(this).parent().children('.content').toggle(); 
}) 

此處更新的代碼 http://jsfiddle.net/ECbkd/8/ *編輯結束*

這是基於HTML這樣的：

<ul> 
    <li>Item 01</li> 
    <li>Item 02</li> 
    <li>Item 03</li> 
    <li>Item 04</li> 
    <li>Item 05</li> 
    <li>Item 06</li> 
    <li>Item 07</li> 
</ul> 
<div class='container'> 
    <div class='item'> 
     <h2>Header 1</h2> 
     <div class='content'>Content 1</div>   
    </div>   
    <div class='item'> 
     <h2>Header 2</h2> 
     <div class='content'>Content 2</div>  
    </div> 
    <div class='item'> 
     <h2>Header 3</h2> 
     <div class='content'>Content 3</div>  
    </div> 
    <div class='item'> 
     <h2>Header 4</h2> 
     <div class='content'>Content 4</div>  
    </div> 
    <div class='item'> 
     <h2>Header 5</h2> 
     <div class='content'>Content 5</div>  
    </div> 
    <div class='item'> 
     <h2>Header 6</h2> 
     <div class='content'>Content 6</div>  
    </div> 
    <div class='item'> 
     <h2>Header 7</h2> 
     <div class='content'>Content 7</div>  
    </div> 

</div>