Есть ли лучший подход к этому? Вместо индивидуальной функции щелчка

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