Javascript 切换Div'；它通过jQuery打开和关闭

飞越者

在过去的几篇博文中，你们都帮了我很大的忙，我现在面临着另一个问题，如果你们能帮助我，我也认为我最后几次解释得不是很好，就这样吧

我有三个id分区，分别是：白色、v2black、v3black。我的目标是有一个超链接导航，切换每个Div的开和关；但是，单击其中一个时，它必须隐藏当前活动的div，以便两个div不同时可见

以防万一，源和现场的链接是：www.steveatattooartist.com

我已经尝试得够多了，这就是我目前的处境：

我的jQuery：

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

jQuery（函数（）{
$（'.toggle'）。打开（'click'，function（）{
var id=$（this.attr（'data-for'）；
$（'#'+id）.toggle（）；
});
});

我的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>

“width=“425”alt=“传记图像”/>



“width=“425”alt=“传记图像”/>

---

真的希望有人能帮助我，因为你们在这个项目上帮了我很大的忙，我非常感激

您的div需要有一个公共属性（例如class），因此您可以先隐藏所有div，然后显示活动div。

切换

类对所有div都是公共的，因此：

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

---

您的div需要有一个公共属性（例如class），这样您可以先隐藏所有div，然后显示活动div。

toggle

类对所有div都是公共的，因此：

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

---

切换以隐藏非当前项：

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

---

切换以隐藏非当前项：

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

---

更新：

使用浏览器中的控制台，我将链接更改为如下所示：

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

您可能还希望执行以下操作：

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

在

$（document）.ready（）

中的某个地方，最初只显示

白色的div

这似乎达到了预期的效果。尝试这些更改，并让我们知道这是否适用于您

--下面的上一个答案--

有几点建议：

行
更新：

使用浏览器中的控制台，我将链接更改为如下所示：

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

您可能还希望执行以下操作：

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

在
$（document）.ready（）
中的某个地方，最初只显示
白色的div

这似乎达到了预期的效果。尝试这些更改，并让我们知道这是否适用于您

--下面的上一个答案--

有几点建议：

参考页上的
行您有标记问题：
可能应该是：
参考页上的
可能应该是：
嘿，皮特！我希望您的反馈是关于-谢谢您的反馈，我已经应用了您上面所说的内容，但它仍然没有影响或改变我的工作。默认情况下，没有任何div设置为隐藏，它们都会持续显示且不链接？-有什么想法吗？如果你能帮忙，我会很高兴的…好的，更新答案。试试看。另外，我注意到您重命名了
切换
类
公共
。虽然它不会伤害任何东西，但它可能是不必要的。我只是想知道为什么会有变化。：）嘿，我最终解决了，我不知道为什么，但那个代码就是不起作用？：/可能是我，但我发布了另一篇帖子，并以不同的方式完成了它！我必须分配不同的I'd标签来进行两次导航更改。在第一次使用jQuery的几天后，它最终被分类了。非常感谢你的帮助！以前从未接触过jQuery，现在确实知道要查找什么，并且稍微了解一些基本知识：）干杯，朋友！嘿，皮特！我希望您的反馈是关于-谢谢您的反馈，我已经应用了您上面所说的内容，但它仍然没有影响或改变我的工作。默认情况下，没有任何div设置为隐藏，它们都会持续显示且不链接？-有什么想法吗？如果你能帮忙，我会很高兴的…好的，更新答案。试试看。另外，我注意到您重命名了
切换
类
公共
。虽然它不会伤害任何东西，但它可能是不必要的。我只是想知道为什么会有变化。：）嘿，我最终解决了，我不知道为什么，但那个代码就是不起作用？：/可能是我，但我发布了另一篇帖子，并以不同的方式完成了它！我必须分配不同的I'd标签来进行两次导航更改。在第一次使用jQuery的几天后，它最终被分类了。非常感谢你的帮助！以前从未接触过jQuery，现在确实知道要查找什么，并且稍微了解一些基本知识：）干杯，朋友！