切換多個div以顯示隱藏

Question

好的，所以我有多個divs（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

function w3_open() { 
     document.getElementById("id01").style.display = 
    "block"; document.getElementById("id02").style.display = "block"
     }

確保您正在使用w3.css

<button onclick="w3_open()" class="w3-button w3-opacity w3-black">Yesterday</button>
<div id="id01" class="w3-panel w3-white w3-card w3-display-container">
<span onclick="document.getElementById('id01').style.display='none'" 
    class="w3-button w3-display-topright">&times;</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>https://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>
<div id="id02" class="test w3-panel w3-white w3-card w3-display- 
 container">

<span onclick="document.getElementById('id02').style.display='none'" 
    class="w3-button w3-display-topright">&times;</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>https://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>

Answer 3

如何為每個列表項分配一個ID，為每個項目容器分配一個對應的ID。 因此，您的列表項的ID為“ item01” ..“ item07”，內容容器的ID為“ item01c” ..“ item07c”。 然后，您可以執行以下操作：

$("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>

...只有七個項目，而不是四個。

如果是這樣，可以這樣做（ 實時復制 ）：

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與class =“ head”的第一個div有關，第二個與class的第二個有關， div.head 。我通過使用index來知道單擊了哪個li ，然后使用:eq查找相關的div.head來div.head :eq

從結構上而不是使用id值進行操作使維護更加容易。 但是，您也可以通過為每個li一個data-div屬性以及相關div的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>

然后（ 實時復制 ）：

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-*屬性從HTML5開始有效，但是所有瀏覽器現在都支持它們。 （ data-*事情是通過賦予人們一種有效的方式來做到這一點，而又不與以后對規范的增加相沖突的一種嘗試，從而使人們對無效屬性的使用得以整理和掌握。）

Answer 5

如果您想使用某人先前建議的.index（），那么我相信這將是最簡單的方法（在http://jsfiddle.net/ECbkd/7/中查看）：

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

您還可以添加以下內容以在單擊標題時顯示內容：

$("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>

Answer 6

如果給li和對應的divs相同的class ，則可以說類似

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

})

}