При клике на элементы появл-ся соответсвующий текст:
<!-- Блок 1 -->
<table class="table-1">
<thead>
<tr>
<th>Table 1</th>
</tr>
</thead>
</table>
<table class="table-2">
<thead>
<tr>
<th>Table 2</th>
</tr>
</thead>
</table>
<div class="links">
<p class="link active">Table-1</p>
<p class="link">Table-2</p>
</div>
.table-2,
.table-3,
.table-4 {
display: none;
}
$(".links p").on("click", function(e) {
$("table").eq($(this).index()).fadeIn(10).siblings("table").fadeOut(10);
$(this).addClass("active").siblings("p").removeClass("active");
})
Все работает, но стоит изменить table на div, работать перестает (при этом изменив table на div и в самом JS, конечно же). Я имею в виду, если закомментить Блок 1 и раскомментить Блок 2:
<!-- Блок 2 -->
<div class="table-1">
<p>
<span>Table 1</span>
</p>
</div>
<div class="table-2">
<p>
<span>Table 2</span>
</p>
</div>
Fiddle.
