单击按钮时显示/隐藏 div答案

【问题标题】：Show/hide div on button click单击按钮时显示/隐藏 div
【发布时间】：2013-01-16 21:24:07
【问题描述】：

我正在尝试根据按下的按钮来显示和隐藏内容。下一个按钮应该显示内容 2 并隐藏内容 1，上一个按钮应该相反。

<script type="text/javascript">
    $('a.button-next').click(function() {
        $("#tab-content2").addClass("show");
    });
</script>

CSS：

#tab-content2 {
    display: none;
}
#tab-content2.show {
    display: none;
}

HTML：

<div id="tab-content1">             
    <?php the_content(); ?>
</div>

<div id="tab-content2">     
    <?php the_field("experience");?>
</div>

<a href="javascript:;" class="button-back">Previous</a>
<a href="javascript:;" class="button-next">next</a>

【问题讨论】：

这样试试$("#tab-content2").toggle()，你甚至不需要css
您的两个 CSS 类都设置为 display: none;。此外，您的 jQuery 周围没有准备好文档的处理程序。
jQuery 确实带有 .show() 和 .hide()...
为什么没有人提到这是重复的？看看相关问题就行了

标签： javascript jquery html css show-hide

【解决方案1】：

试试toggleClass，别忘了使用document.ready()：

$(document).ready(function() {
    $('a.button-next').click(function() {
        $("#tab-content2").toggleClass("show");
    });
});

#tab-content2.show {display:block;}

【讨论】：

【解决方案2】：

对所有内容使用通用类

<div class="content" id="tab-content1">             
    <?php the_content(); ?>
</div>
<div class="content" id="tab-content2">     
    <?php the_field("experience");?>
</div>

<a href="javascript:;" class="button-back">Previous</a>
<a href="javascript:;" class="button-next">next</a>

所以css应该是

.content {
    display: none;
}

还有 Javascript

$('a.button-next').click(function() {
    $('.content').hide(); // To hide all other contents
    $("#tab-content2").show(); // Show the one content you want to display
});

【讨论】：

【解决方案3】：

show的显示属性为none。

将其更改为block。

另外，您可以只使用.show() 或.hide() 函数而不是使用类。

【讨论】：

【解决方案4】：

试试这个...

$('a.button-next').on('click', function() {
    $("#tab-content2").toggle("show");
});

【讨论】：

【解决方案5】：

HTML

<div id="tab-content-holder">
    <div id="tab-content1 show">             
        <?php the_content(); ?>
    </div>

    <div id="tab-content2">     
        <?php the_field("experience");?>
    </div>
</div>

<a href="#" class="button-back">Previous</a>
<a href="#" class="button-next">Next</a>

JS

$(document).ready(function() {
    $(".button-back").click(function() {
        MenuNavigationClick(-1);
    });
    $(".button-next").click(function() {
        MenuNavigationClick(1);
    });

    function MenuNavigationClick(direction) {
        // Get current element index and toggle
        var current = $("#tab-content-holder .show");
        var index = current.index();
        current.toggleClass("show");

        // Move to next element and check for overflow
        index += 1 * direction;
        index %= $("#tab-content-holder div").length;

        // Toggle next element
        $("#tab-content-holder div:eq("+index+")").toggleClass("show");
    }
});

CSS

#tab-content-holder div {
    display: none;
}
#tab-content-holder div.show {
    display: block;
}

【讨论】：

【解决方案6】：

您是否尝试过将节目类转移到另一条线路上？

.show
{
    display: block;
}

【讨论】：