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需要有一个共同的属性（例如类），所以你可以先隐藏它们，然后显示活动的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。

这似乎有所期望的效果。尝试这些更改，并告诉我们这是否适合您。

- 以下答案 -

一些建议：

行<div id="white class="toggle" data-for="white">可能应该是<div id="white" class="toggle" data-for="white">。
div.altstevenav和div.delstevenav之间唯一真正的区别是包含元素。您应该使用一个不同的id属性提供链接，或者根本不考虑使用id属性。
v2black和v3black div都是white div的子项。你应该让它们成为white div的兄弟姐妹，要么将它们移出white div，要么使用当前div（带id="white"）作为容器div（没有{ {1}}属性）并使用id创建容器的新子div。
对于要用于触发div可见性切换操作的链接，您应该将id="white"属性移动到这些链接而不是目标div。

链接示例（第2点）：

data-for

或

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

然后，您可以使用以下jQuery来完成工作（第4点）：

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

Answer 3

切换以隐藏不是当前的：

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

通过jQuery打开和关闭Div

3 个答案: