Что представляет собой элегантный способ отображения таблицы с четырьмя вкладками, которая меняет свое содержимое на основе вкладки в HTML / CSS / Native JavaScript?

Я сделал ручку для этого без Javascript в современных браузерах.

Я использую радио и метки для отображения разных таблиц. Он использует SASS, Haml и Bootstrap для базового стиля, но вы можете просмотреть скомпилированные HTML и CSS, нажав "(Haml)" и "(SCSS)",

http://codepen.io/jakealbaugh/pen/qsryx/

РЕДАКТИРОВАТЬ:

Здесь скучная скрипка скомпилированного CSS и HTML: http://jsfiddle.net/aHjnY/2/

Упрощенный HTML

<div class="container">

  <!-- hidden radios. first is checked -->
  <input checked='true' id='radio-1' name='tables' type='radio'>

  <!-- more unchecked inputs for each table here -->
  <!-- id='radio-1' becomes id='radio-2' and so on -->

  <!-- button group for labels -->
  <div class='btn-group'>

    <label for='radio-1'>
      Table 1
    </label>

    <!-- other labels for each input here -->
    <!-- for='radio-1' becomes for='radio-2' and so on -->

  </div>

  <div class='table-container' id='radio-1-table'>
    <table>
      <!-- table content -->
    </table>
  </div>

  <!-- more table containers here -->
  <!-- id='radio-1-table' becomes id='radio-2-table' and so on -->

</div> <!-- close main container -->

CSS

.container {
  position: relative;
}

.table-container {
  opacity: 0;
  position: absolute;
  right: 2%;
  left: 2%;
}

input[type="radio"] {
  /* hiding all radios */
  display: none;
}

/* do the following for each radio/table/label */

input[type="radio"]#radio-1:checked ~ #radio-1-table {
  /* showing the right table when radio is checked */
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}
input[type="radio"]#radio-1:checked ~ .btn-group > label[for="radio-1"] {
  /* styling current label */
  color: #333;
  background-color: #ebebeb;
  border-color: #adadad;
}

/* keep going for each radio and table */

а. Используйте вкладки jquery. Отлично подходит для вашего дела. б. Если вы не хотите вставлять jquery в jquery, используйте логику jquery: для каждой вкладки и отображения javascript/скрыть их содержимое. Вы можете сделать это со всем кодом в одной программе (не рекомендуется, но возможно), или использовать ajax-вызовы и разные программы. Для записи: перед временем ajax я использовал успех iframe для каждой страницы. Теперь звучит неловко, но было время, когда это было правильное решение.