WordPress+Elementor博客上的Javascript或JQuery用于显示/隐藏按钮

4sup72z8 于 2023-03-29 发布在 WordPress

关注(0)|答案(1)|浏览(152)

在我的个人博客上，我想插入3个按钮，它们具有显示/隐藏****3个不同元素的功能，我还想有可能使用相同的标签/文本代码**，如果可能的话，以确保单击时，突出显示的文本，像按钮一样显示或隐藏内容。我试着使用一些在网络上找到的代码，唯一有效的是这个（读下来）一个，但我不确定它是否正确.网站开始工作，即使没有这个代码，直到我做了一般的缓存清理.你能帮我写一个合适的代码，可以与我的要求工作？你能不能也解释一下我如何改变点击按钮时的文本？例如从“显示内容”到“隐藏内容”。我附加了适合我的jquery代码。javascript不适用于网站。

如果您需要数据：
**按钮：功能：**btn 1显示/隐藏btn 2显示/隐藏btn 3显示/隐藏
**label：函数：**lbl 1显示/隐藏lbl 2显示/隐藏lbl 3显示/隐藏
**段落：描述：**p1当您单击文本或按钮时出现和消失的段落p2当您单击文本或按钮时出现和消失的段落p3当您单击文本或按钮时出现和消失的段落
代码：

<script>
jQuery( document ).ready(function() {
   jQuery( "#show_01" ).click(function() {
        jQuery(".changing_image").hide();
            jQuery("#01").fadeToggle();
            jQuery(".our_nav").removeClass("my_active");
            jQuery("#show_01").addClass("my_active");
     });
        
        jQuery( "#show_02" ).click(function() {
        jQuery(".changing_image").hide();
            jQuery("#02").fadeToggle();
            jQuery(".our_nav").removeClass("my_active");
            jQuery("#show_02").addClass("my_active");
     });
        
        jQuery( "#show_03" ).click(function() {
        jQuery(".changing_image").hide();
            jQuery("#03").fadeToggle();
            jQuery(".our_nav").removeClass("my_active");
            jQuery("#show_03").addClass("my_active");
     });
        
        jQuery( "#show_04" ).click(function() {
        jQuery(".changing_image").hide();
            jQuery("#04").fadeToggle();
            jQuery(".our_nav").removeClass("my_active");
            jQuery("#show_04").addClass("my_active");
     });
});
</script>

wordpress

来源：https://stackoverflow.com/questions/75845025/javascript-or-jquery-on-wordpresselementor-blog-for-a-show-hide-button

1条答案

按热度按时间

velaa5lx1#

我想这可能是一个解决方案，可能对你想做的事情有效...

<style>
/* Hide content by default */
.content {
  display: none;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<!-- some example buttons and content divs... -->
<button class='button' id="1">Show content 1</button>
<button class='button' id="2">Show content 2</button>
<button class='button' id="3">Show content 3</button>

<div class="content 1">Content 1 goes here</div>
<div class="content 2">Content 2 goes here</div>
<div class="content 3">Content 3 goes here</div>


<script>
$(document).ready(function() {
  // Hide content on content click
  $(".content").click(function() {
    id = $(this).attr("id");
    // now change text of button that has id = id
    $(".button#" + id).text("Show content " + id);
    $(this).hide();
    
  });
  
  // Toggle content on button click
  $(".button").click(function() {
    var buttonId = $(this).attr("id");
    var contentClass = ".content." + buttonId.slice(-1);
    
    $(contentClass).toggle();
    $(this).text(function(i, text){
      return text === "Show content " + buttonId.slice(-1) ? "Hide content " + buttonId.slice(-1) : "Show content " + buttonId.slice(-1);
    })
  });
});
</script>

赞(0）回复(0）举报 2023-03-29

我来回答

WordPress+Elementor博客上的Javascript或JQuery用于显示/隐藏按钮

1条答案

相关问题

热门标签

最新问答