Как переключать таблицы при нажатии на кнопки?

Question

$('.table-header .table-btn').click(
    function() {
      var a = $(this).siblings('table');
      if (a.hasClass('active-table')) {
        a.removeClass('active-table');
        a.hide("fast");
      } else {
        var b = $(this).parent().parent().children().children('.active-table');
        b.removeClass('active-table');
        b.hide('fast');
        a.addClass('active-table');
        a.show("fast");
      }
    }
  );
  $('.active-table').show("fast");

.main-table {
    display: block;
    margin-bottom: 60px;
}

.table-header {
    display: inline-block;
    margin-top: 50px;
    width: 100%;
}

.container {
    width: 1170px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}

.table-btn {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    padding: 16px 16px;
    background-color: #9d1c25;
    font-size: 18px;
    color: #fff;
    border-radius: 0;
    border: 2px solid #9d1c25;
    width: 170px;
    height: 65px;
    margin-right: 12px;
    cursor: pointer;
}

.active-btn {
    background-color: #fff;
    color: #991c25;
}



.table-main {
    margin-top: 50px;
}

.table-header h3 {
    display: inline-block;
    margin-left: 32px;
    color: #991c25;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 2px
}

.table-main table tr td{
    width: 10%;
}

table {
    display: none;
    table-layout: fixed;
    width: 100%;
    
    border-collapse: collapse;
}

.active-table {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-table">
            <div class="container">
                <div class="table-header">
                    <button class="table-btn active-btn" href="1-tb">Характеристики</button>
                    <button class="table-btn" href="2-tb">Размеры</button>
                    <h3>Таблица с данными</h3>
                </div>
                <div class="table-main">
                    <table  class="table active-table">
                        <thead>
                            <tr class="top-tr">
                                <td>Данные</td>
                                <td>Данные</td>
                                <td>Данные</td>
                                <td>Данные</td>
                                <td>Данные</td>
                                <td>Данные</td>
                                <td>Данные</td>
                                <td>Данные</td>
                                <td>Данные</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="bottom-tr">
                                <td>РБ</td>
                                <td>6 .</td>
                                <td>10 .</td>
                                <td>2,2 м</td>
                                <td>1650 мм</td>
                                <td>4439 кг</td>
                                <td>4 шт</td>
                                <td>240</td>
                                <td>67,6 кВт</td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="table">
                        <thead>
                            <tr class="top-tr">
                                <td>Другие Данные</td>
                                <td>Другие Данные </td>
                                <td>Другие Данные </td>
                                <td>Другие Данные </td>
                                <td>Другие Данные </td>
                                <td>Другие Данные</td>
                                <td>Другие Данные </td>
                                <td>Другие Данные </td>
                                <td>Другие Данные </td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="bottom-tr">
                                <td>АМ</td>
                                <td>6 .</td>
                                <td>10 .</td>
                                <td>2 м</td>
                                <td>2650х1900 мм</td>
                                <td>44 кг</td>
                                <td>4 шт</td>
                                <td>540 мм</td>
                                <td>67,6 кВт</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

Вопрос заключается в том, как при нажатии на кнопки переключать таблицы между собой. Пробовал jquery, но таблица только пропадает и все.

Answer 1

Можно что-то такое сделать..

$('.table-header .table-btn').click(
  function() {
    if (!this.classList.contains('active-btn')) {
      $('.table').toggleClass('active-table');
      $('.table-btn').toggleClass('active-btn');
    }
  }
);

.main-table {
  display: block;
  margin-bottom: 60px;
}

.table-header {
  display: inline-block;
  margin-top: 50px;
  width: 100%;
}

.container {
  width: 1170px;
  margin: 0 auto;
  padding-right: 15px;
  padding-left: 15px;
}

.table-btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  padding: 16px 16px;
  background-color: #9d1c25;
  font-size: 18px;
  color: #fff;
  border-radius: 0;
  border: 2px solid #9d1c25;
  width: 170px;
  height: 65px;
  margin-right: 12px;
  cursor: pointer;
}

.active-btn {
  background-color: #fff;
  color: #991c25;
}

.table-main {
  margin-top: 50px;
}

.table-header h3 {
  display: inline-block;
  margin-left: 32px;
  color: #991c25;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 2px
}

.table-main table tr td {
  width: 10%;
}

.table {
  display: none;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.active-table {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-table">
  <div class="container">
    <div class="table-header">
      <button class="table-btn active-btn" href="1-tb">Характеристики</button>
      <button class="table-btn" href="2-tb">Размеры</button>
      <h3>Таблица с данными</h3>
    </div>
    <div class="table-main">
      <table class="table active-table">
        <thead>
          <tr class="top-tr">
            <td>Данные</td>
            <td>Данные</td>
            <td>Данные</td>
            <td>Данные</td>
            <td>Данные</td>
            <td>Данные</td>
            <td>Данные</td>
            <td>Данные</td>
            <td>Данные</td>
          </tr>
        </thead>
        <tbody>
          <tr class="bottom-tr">
            <td>РБ</td>
            <td>6 .</td>
            <td>10 .</td>
            <td>2,2 м</td>
            <td>1650 мм</td>
            <td>4439 кг</td>
            <td>4 шт</td>
            <td>240</td>
            <td>67,6 кВт</td>
          </tr>
        </tbody>
      </table>
      <table class="table">
        <thead>
          <tr class="top-tr">
            <td>Другие Данные</td>
            <td>Другие Данные </td>
            <td>Другие Данные </td>
            <td>Другие Данные </td>
            <td>Другие Данные </td>
            <td>Другие Данные</td>
            <td>Другие Данные </td>
            <td>Другие Данные </td>
            <td>Другие Данные </td>
          </tr>
        </thead>
        <tbody>
          <tr class="bottom-tr">
            <td>АМ</td>
            <td>6 .</td>
            <td>10 .</td>
            <td>2 м</td>
            <td>2650х1900 мм</td>
            <td>44 кг</td>
            <td>4 шт</td>
            <td>540 мм</td>
            <td>67,6 кВт</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как переключать таблицы при нажатии на кнопки?

Ответы (1 шт):