如何在 wordpress/elementor 中更改不同按钮点击时的图像

Question

我需要有关开发 3 列部分的帮助，其中中间列用于图像。左列和右列分别有右侧 5 和左侧 5 之类的按钮，我想在用户单击时更改每个按钮上的图像。我正在使用 elementor 生成器如果我可以通过任何插件或 html 或 javascript 完成，请指导我。我可以添加参考图片，这样你就可以准确地理解我需要什么。提前致谢。

this is the reference 如果让我知道它可以是一个小部件，因为我对编码不太了解。

Answer 1

将 hiddenBlock class 添加到每个视频或图像元素。并隐藏所有并显示 CSS.

的第一个元素

CSS

function hide_hiddenBlock(){
    ?>
    <style type="text/css">
        .hiddenBlock{display: none;}
        .hiddenBlock1{display: show;}
    </style>
    <?php
}
add_action( 'wp_head', 'hide_hiddenBlock', 10, 1 );

JAVASCRIPT

function show_video_based_on_button_click(){ ?>
    <script type="text/javascript">

        jQuery(document).ready( function( $ ){ 
            
            // hide every element that has a hidden block class and then show accordingly.

            $('.hiddenBlock').hide("slow");

            $('#showBlock1').click( function(e) { 
                $('.hiddenBlock1').show("slow"); 
            }); 

            $('#showBlock2').click(function(e) { 
                $('.hiddenBlock2').show("slow");
            }); 

            $('#showBlock3').click(function(e) { 
                $('.hiddenBlock3').show("slow");
            }); 

            $('#showBlock4').click(function(e) { 
                $('.hiddenBlock4').show("slow");
            });

            $('#showBlock5').click(function(e) { 
                $('.hiddenBlock5').show("slow");
            }); 

            $('#showBlock6').click(function(e) { 
                $('.hiddenBlock6').show("slow");
            }); 

            $('#showBlock7').click(function(e) { 
                $('.hiddenBlock7').show("slow");
            }); 

            $('#showBlock8').click(function(e) { 
                $('.hiddenBlock8').show("slow");
            }); 

        });
    </script>
<?php }
add_action( 'wp_footer', 'show_video_based_on_button_click', 10, 1 );

如何在 wordpress/elementor 中更改不同按钮点击时的图像

how to change images on different button clicks in wordpress/elementor

wordpress

tabs

gallery

filter

elementor