我想問這種的 tab 切換有沒有簡化的空間？

Question

$('.desc-btn').click(function(e) {
  $('.desc-btn').removeClass('productview_tab_inactive').addClass('productview_tab_active');
  $('.info-btn, .note-btn').removeClass('productview_tab_active').addClass('productview_tab_inactive');
  $('.desc-content').show('fast');
  $('.info-content').hide('fast');
  $('.note-content').hide('fast');
});
$('.info-btn').click(function(e) {
  $('.info-btn').removeClass('productview_tab_inactive').addClass('productview_tab_active');
  $('.desc-btn, .note-btn').removeClass('productview_tab_active').addClass('productview_tab_inactive');
  $('.info-content').show('fast');
  $('.desc-content').hide('fast');
  $('.note-content').hide('fast');
});
$('.note-btn').click(function(e) {
  $('.note-btn').removeClass('productview_tab_inactive').addClass('productview_tab_active');
  $('.desc-btn, .info-btn').removeClass('productview_tab_active').addClass('productview_tab_inactive');
  $('.note-content').show('fast');
  $('.info-content').hide('fast');
  $('.desc-content').hide('fast');
});

這是我寫的
但我發現似乎可以再簡化？但我已經想不到
想問線上的大神的簡化寫法。

補充
果然有，感謝各位大神，太神啦

Answer 1

好热闹。我也试试，题目没有给出html结构，所以答题时我就自由发挥了。
以下是完整的css，js，html DEMO

<style type="text/css">
    .tab-btn {
        display: inline-block;
        padding: 5px 10px;
    }

    .tab-content {
        display: none;  /*关键*/
        height: 0;      /*关键*/
    }

    .tab-btn.active{
        color: white;
        background: black;
    }


    .tab-content.active{
        display: block;  /*关键*/
        height: auto;    /*关键*/
    }
</style>

<div class="tabs">
    <div class="tab-btn active">DESC</div>
    <div class="tab-btn">INFO</div>
    <div class="tab-btn">NOTE</div>
</div>
<div class="contents">
    <div class="tab-content active">DESC-Content</div>
    <div class="tab-content">INFO-Content</div>
    <div class="tab-content">NOTE-Content</div>
</div>

<script type="text/javascript">
    $('.tab-btn').each(function(index) {
        $(this).data('index', index);
    });
    $('.tab-btn').click(function() {
        var index = $(this).data('index');
        $(this).addClass('active').siblings().removeClass('active');
        $('.tab-content:eq(' + index +')').show('fast').siblings().hide('fast');
    });
</script>

Answer 2

类似于这样，使用 $(this).自行修改

$('.btn').click(function(e) {
  $(this).removeClass('productview_tab_inactive').addClass('productview_tab_active').show();
  $(this).siblings().removeClass('productview_tab_active').addClass('productview_tab_inactive').hide();
});

Answer 3

当然有, 把你 html 源码贴一下

Answer 4

$('.tabList').on('click', '.tabToggle', function(event) {
  event.preventDefault();

  const $this = $(this);
  const $tabList = $this.parents('.tabList');
  $tabList.find('.tabToggle').removeClass('active');
  $this.addClass('active');

  const targetId = $this.attr('href');
  const $target = $(targetId);
  const $tapContent = $target.parents('.tabContent');
  $tapContent.find('.tabPanel').removeClass('active');
  $target.addClass('active');
});

使用方式

<div class="tabList">
    <a class="desc-btn tabToggle" href="#desc">desc</a>
    <a class="info-btn tabToggle" href="#info">info</a>
    <a class="note-btn tabToggle" href="#note">note</a>
</div>

<div class="tabContent">
    <div id="desc" class="tabPanel" >
    <div id="info" class="tabPanel" >
    <div id="note" class="tabPanel" >
</div>

可以任意增加 tab 而不需要再次修改 js.