时间戳

首页 > 解决方案 > 单击按钮 2 时禁用按钮 1 部分

javascript - 单击按钮 2 时禁用按钮 1 部分

问题描述

在 Elementor 页面构建器中有多个按钮和与这些按钮关联的部分。

我想要实现的是当页面加载时，我们只能看到按钮，当有人点击按钮时，部分会切换。

我已经设法实现了这一点，但是当单击第二个按钮时，按钮 1 部分应该隐藏，而按钮 2 部分应该显示。

这是我的项目的 w3 学校链接

jQuery(document).ready(function( $ ){
    
  var hbtn = $(".coursesBtn");
  var hcon = $(".coursesSection");
  
   hcon.hide();
   hbtn.click(function(e) {
   var index = hbtn.index(this) 
   $(hcon).eq(index).slideToggle("slow");

   e.preventDefault();     
    });
});
jQuery(document).ready(function( $ ){
    
  var hbtn = $(".videosBtn");
  var hcon = $(".videosSection");
  
   hcon.hide();
   hbtn.click(function(e) {
   var index = hbtn.index(this) 
   $(hcon).eq(index).slideToggle("slow");

   e.preventDefault();     
    });
});

标签： javascripthtmljquery

解决方案

这是一个简单的例子，想法是先隐藏其他部分，然后显示您想要显示的部分；

$(document).ready(function($) {

  $('.btn1').click(function() {
    $('.section').hide();
    $('.section1').show();
  })

  $('.btn2').click(function() {
    $('.section').hide();
    $('.section2').show();
  })

  $('.btn3').click(function() {
    $('.section').hide();
    $('.section3').show();
  })

})
.section {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

.section2 {
  background-color: lightgreen;
}

.section3 {
  background-color: orange;
}
<button class="btn1">BUTTON1</button>
<button class="btn2">BUTTON2</button>
<button class="btn3">BUTTON3</button>

<div class="section section1">
  This is Section1.
</div>
<div class="section section2">
  This is Section2.
</div>
<div class="section section3">
  This is Section3.
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

推荐阅读