显示和隐藏 Divi 部分的选项卡效果

Question

我正在尝试执行选项卡效果，以在单击按钮时显示和隐藏 Divi 部分。我在网上找到了一种解决方案，但它只能切换效果。因此，当我单击一个按钮，然后单击第二个按钮时，第一个按钮的部分保持活动状态并且不会隐藏。我想做一个选项卡效果，所以当我单击第一个按钮时，第一部分保持活动状态，当我单击第二个按钮时，第一部分消失并仅出现第二部分。 这是我现在使用的代码：

<style>
body:not(.et-fb) .rv_element { display: none; }
.et_pb_button.rv_button_opened:after { content:"\32"; }
.et_pb_button.rv_button_closed:after { content:"\33"; }

.rv_element_2 { 
    display: none; 
}
</style>

<script>
jQuery(function($){
    var revealButtons = {
        '.rv_button_1': '.rv_element_1',
        '.rv_button_2': '.rv_element_2'
    };
    $.each(revealButtons, function(revealButton, revealElement, hideElement) {
        $(revealButton).click(function(e){
            e.preventDefault();
            $(revealElement).slideToggle();
            $(revealButton).toggleClass('rv_button_opened rv_button_closed');
        });
    });
});
jQuery(function($){
    $('.rv_button_1').click();
});
</script> 

rv_element_1-2 是我想要显示/隐藏的部分，rv_button_1-2 是我单击的按钮。目前，我通过第一个按钮上的单击功能自动显示第一部分。

我相信有一些简单的解决方案，但我对 JS 和 jQuery 很陌生，我自己很难弄清楚。

非常感谢您的帮助。

Answer 1

您好，我使用以下方法解决了这个问题：

首先您需要创建按钮并为每个按钮添加一个 Id，这可以在 Divi 按钮设置 -> 中完成。高级-> id 和 css 类：

Button1 id：bt-equipo
Button2 id：bt-consejo
Button3 id：bt-junta

因此，当您单击任何按钮时，都会触发该操作。

然后您需要创建行，并在我的例子中为每一行添加一个类：

Row1:equipo_icmedia
第2行：consejo_icmedia
Row3:junta_icmedia

再次转到 Divi 部分设置中的每个部分 ->高级-> id 和 css class 并将该类添加到每一行。

我们将管理 Css 属性显示块以显示元素并显示无以隐藏元素。

在我的例子中，将显示块属性添加到默认显示的第一行（row1类equipo_icmedia），row2和row3将具有display:none属性来默认隐藏此元素。

当您单击任何按钮时，显示属性都会发生变化。显示与按钮关联的行并隐藏其他行。

您需要将以下代码添加到代码模块内的div中。

    <script>
     jQuery(document).ready(function($) {
        // Function to show the Row1 and hide row2 row3 when click button1 
        $('#bt-equipo').click(function(event) {
            event.preventDefault(); 
            $('.equipo_icmedia').css('display', 'block');
            $('.consejo_icmedia, .junta_icmedia').css('display', 'none');
        });
    
        // Function to show the Row2 and hide row1 row3 when click button2 
        $('#bt-consejo').click(function(event) {
            event.preventDefault(); 
            $('.consejo_icmedia').css('display', 'block');
            $('.equipo_icmedia, .junta_icmedia').css('display', 'none');
        });
    
        // Function to show the Row3 and hide row2 row1 when click button3 
        $('#bt-junta').click(function(event) {
            event.preventDefault();
            $('.junta_icmedia').css('display', 'block');
            $('.equipo_icmedia, .consejo_icmedia').css('display', 'none');
        });
    });
    </script>

如果您添加其他行以显示/隐藏，请进入 Divi 部分设置 ->高级-> id 和 css class 并将该类添加到每一行。