jquery - 有更好的方法吗？代替单独的点击功能

Question

我正在尝试使用三个按钮和三个内容创建显示和隐藏。

$( ".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");
              });

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

Answer 1

这是使用 not(this) 和 1 个点击事件的简单方法:

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

您可以在这里尝试:https://jsfiddle.net/f7ur6pj8/

编辑:

这是根据您的案例更新的内容:

首先，给你另一个类 3 个按钮(exp. tab-content)

<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>   

对于您的 JavaScript:

$( ".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");
});