Jquery 有没有更好的方法？而不是单独的点击功能

我试图用三个按钮和三个内容创建显示和隐藏

$( ".left-tab-header" ).click(function() {
                    $(".left-tab-content").toggleClass("show-tab-content");
                    $(".middle-tab-content").removeClass("show-tab-content");
                    $(".right-tab-content").removeClass("show-tab-content");
                    $(this).css("background", "#000");
                    $(".middle-tab-header").css("background","#020C15");
                    $(".right-tab-header").css("background","#020C15");
              });
     //click event for the middle-tab-header 
      $( ".middle-tab-header" ).click(function() {
                    $(".left-tab-content").removeClass("show-tab-content");
                    $(".middle-tab-content").toggleClass("show-tab-content");
                    $(".right-tab-content").removeClass("show-tab-content");
                    $(this).css("background", "#000");
                    $(".left-tab-header").css("background","#020C15");
                    $(".right-tab-header").css("background","#020C15");
              });

    // click event for the right-tab-header
     $( ".right-tab-header" ).click(function() {
                    $(".left-tab-content").removeClass("show-tab-content");
                    $(".middle-tab-content").removeClass("show-tab-content");
                    $(".right-tab-content").toggleClass("show-tab-content");
                    $(this).css("background", "#000");
                    $(".left-tab-header").css("background","#020C15");
                    $(".middle-tab-header").css("background","#020C15");
              });

---

我不知道是否有一个函数可以简化这个过程。它工作得很好，没有错误。但我不想让所有重复参数都有单独的点击功能

以下是一种使用

not（this）

和单击事件的简单方法：

$( ".a, .b, .c" ).click(function() {
  $('button').not(this).removeClass('show-tab-content');
  $(this).toggleClass('show-tab-content');
});

您可以在这里尝试：

编辑：

以下是基于您的案例的更新：

首先，给你另外一个类3个按钮（exp.tab内容）

---

我看不到name按钮，因为页面上有几个带有按钮的元素。此外，我还使用了“div和section”。但是，“show tab content”不是背景颜色，而是显示内容，而.css（）是打开和关闭按钮上的背景，如div。这只是一个示例，向您展示了如何在一次单击事件中使用不同的类/元素，以及如何不使用（此），对于这3个按钮，您可以给它们另一个类（exp:tab header）并替换$（'.tab header'）。而不是（这个）

<button class='left-tab-content tab-content'>A</button>   
<button class='middle-tab-content tab-content'>B</button> 
<button class='right-tab-content tab-content'>C</button>   

$( ".left-tab-content, .middle-tab-content, .right-tab-content" ).click(function() {
  $(this).toggleClass('show-tab-content');
  $('.tab-content').not(this).removeClass('show-tab-content');
  $(this).css("background", "#000");
  $('.tab-content').not(this).css("background","#020C15");
});