通過jQuery切換Div的開和關

Question

Stackoverflowers！

在過去的幾篇文章中，您都幫助我取得了長足的進步，如果您能幫助我，我現在面臨另一個問題，我還認為上次我的講解還不是很好，因此請繼續。

我有3個ID div，分別為：white，v2black，v3black。 我的目標是擁有一個超鏈接導航，該導航可切換Div的每個打開和關閉； 但是，當單擊一個時，它必須隱藏當前活動的div，這樣就不會同時顯示兩個。

以防萬一，來源和實時網站的鏈接是：www.steveatattooartist.com

我已經盡力了，這就是我現在所處的位置：

我的jQuery：

<script>
 jQuery(function() {
  $('.toggle').on('click', function() {
    var id = $(this).attr('data-for');
    $('#' + id).toggle();
  });
});
</script>

我的HTML結構：

<div class="altstevenav" style="display:none">
<div class="stevenav">
<ul class="navigation">
<li><a href="#firstpagename" id="firstpagename"><?php echo the_field('first_page_name'); ?></a></li>
<li><a href="#secondpagename" id="secondpagename"><?php echo the_field('second_page_name'); ?></a></li>
<li><a href="#thirdpagename" id="thirdpagename"><?php echo the_field('third_page_name'); ?></a></li>
</ul>
</div>
</div>

</div> <!--MAIN CLOSING DIV-->
</div> <!--CONTENT CLOSING DIV-->

<div class="delstevenav">
<div class="stevenav">
<ul class="navigation">
<li><a href="#firstpagename" id="firstpagename"><?php echo the_field('first_page_name'); ?></a></li>
<li><a href="#secondpagename" id="secondpagename"><?php echo the_field('second_page_name'); ?></a></li>
<li><a href="#thirdpagename" id="thirdpagename"><?php echo the_field('third_page_name'); ?></a></li>
</ul>
</div>
</div>
<!--ALL DIVS ARE CLOSE HERE-->

<!--Divisional Panels-->
<div id="white  class="toggle" data-for="white">
<div style="width:968px; margin: 0 auto;">
<div class="panel" style="color:#000000;">
<div style="width:450px; float:left;">
<img src="<?php echo the_field('image_one_of_biography'); ?>" width="425" alt="Biography Image" />
<br /><br />
<img src="<?php echo the_field('image_two_of_biography'); ?>" width="425" alt="Biography Image" />
<br /><br />
<img src="<?php echo the_field('image_three_of_biography'); ?>" width="425" alt="Biography Image" />
</div>
<div style="width:450px; float:left; text-align:left;">
<?php echo the_field('biography_content'); ?>
</div>
</div>
</div>

<div id="v2black" class="toggle" data-for="v2black">
<div style="width:968px; height:500px; margin: 0 auto;">

</div>
</div>

<div id="v3black"  class="toggle" data-for="v3black">
<div style="width:968px; height:500px; margin: 0 auto;">

</div></div>

</div>

真的希望有人能幫助我，因為你們已經認真地幫助我在該項目中取得了長足的進步，我對此表示贊賞，很多！

Answer 1

您的div需要具有一個公共屬性（例如class），因此您可以先將它們全部隱藏，然后再顯示活動的div。 toggle類對所有它們都是通用的，因此：

$('.toggle').on('click', function() {
    $(".toggle").hide();
    var id = $(this).attr('data-for');
    $('#' + id).show();
});

Answer 2

更新：

使用瀏覽器中的控制台，我將鏈接更改為如下所示：

<div class="altstevenav" style="display: none; ">
    <div class="stevenav">
        <ul class="navigation">
            <li>
                <a href="#firstpagename" id="firstpagename" data-for="white">Steve A</a>
            </li>
            <li>
                <a href="#secondpagename" id="secondpagename" data-for="v2black">Tattoos</a>
            </li>
            <li>
                <a href="#thirdpagename" id="thirdpagename" data-for="v3black">Sketchbook</a>
            </li>
        </ul>
    </div>
</div>

<div class="stevenav">
    <ul class="navigation">
        <li>
            <a href="#firstpagename" id="firstpagename2" data-for="white">Steve A</a>
        </li>
        <li>
            <a href="#secondpagename" id="secondpagename2" data-for="v2black">Tattoos</a>
        </li>
        <li>
            <a href="#thirdpagename" id="thirdpagename2" data-for="v3black">Sketchbook</a>
        </li>
    </ul>
</div>

然后我因此重新分配了點擊處理程序：

$('ul.navigation a[data-for]').click(function (e) {
    var targetDiv = $(this).attr('data-for');
    $('div.common').hide();
    $('div#' + targetDiv).show();
    e.preventDefault();
    return false;
});

您可能還想做：

$('div.common').hide();
$('div#white').show();

$(document).ready()某個位置最初只顯示white div。

這似乎具有預期的效果。 嘗試這些更改，並告訴我們是否對您有用。

-下面的先前答案-

一些建議：

1. <div id="white class="toggle" data-for="white"> ，行<div id="white class="toggle" data-for="white">應該改為<div id="white" class="toggle" data-for="white"> 。
2. div.altstevenav和div.delstevenav之間的唯一真正區別是包含元素。 您應該在一個不同的id屬性中提供鏈接，或者考慮完全不使用id屬性。
3. v2black和v3black div都是white div的子級。 您應通過將它們移出white div或使用當前div（具有id="white" ）作為容器div（不具有id屬性）並使其成為新的子div來使它們成為white div的兄弟。容器的id="white"代替。
4. 對於要用於觸發div可見性切換操作的鏈接，應將data-for屬性移到那些鏈接上，而不是在目標div上。

鏈接示例（第2點）：

<div class="altstevenav" style="display:none">
    <div class="stevenav">
        <ul class="navigation">
            <li>
                <a href="#firstpagename" id="altfirstpagename">Steve A</a>
            </li>
            <li>
                <a href="#secondpagename" id="altsecondpagename">Tattoos</a>
            </li>
            <li>
                <a href="#thirdpagename" id="altthirdpagename">Sketchbook</a>
            </li>
        </ul>
    </div>
</div>
</div>
<!--MAIN CLOSING DIV-->
</div>
<!--CONTENT CLOSING DIV-->
<div class="delstevenav">
    <div class="stevenav">
        <ul class="navigation">
            <li>
                <a href="#firstpagename" id="delfirstpagename">Steve A</a>
            </li>
            <li>
                <a href="#secondpagename" id="delsecondpagename">Tattoos</a>
            </li>
            <li>
                <a href="#thirdpagename" id="delthirdpagename">Sketchbook</a>
            </li>
        </ul>
    </div>
</div>

要么

 <div class="altstevenav" style="display:none">
    <div class="stevenav">
        <ul class="navigation">
            <li>
                <a href="#firstpagename">Steve A</a>
            </li>
            <li>
                <a href="#secondpagename">Tattoos</a>
            </li>
            <li>
                <a href="#thirdpagename">Sketchbook</a>
            </li>
        </ul>
    </div>
</div>
</div>
<!--MAIN CLOSING DIV-->
</div>
<!--CONTENT CLOSING DIV-->
<div class="delstevenav">
    <div class="stevenav">
        <ul class="navigation">
            <li>
                <a href="#firstpagename">Steve A</a>
            </li>
            <li>
                <a href="#secondpagename">Tattoos</a>
            </li>
            <li>
                <a href="#thirdpagename">Sketchbook</a>
            </li>
        </ul>
    </div>
</div>

然后，您可以使用下面的jQuery完成工作（第4點）：

$('a[data-for]').click(function (e) {
    var targetDiv = $(this).attr('data-for');
    $('div.toggle').hide();
    $(targetDiv).show();
    e.preventDefault();
    return false;
});

Answer 3

切換以隱藏不當前的：

$('.toggle').on('click', function() {
    $(".toggle").not('#' + $(this).data('for')).hide();
});