Показать элемент по счету
или переключатель текста
Разберем простой переключатель текста. Для того, чтобы каждый раз не писать отдельную функцию привязанную к классам необходимых элементов, вот небольшой код-паттерн. Который открывает нужный блок "по счету" кликнутой ссылки. Требуется только заменить классы на что кликаем и что открываем.
Как это работает: сначала нужно определить какой "по счету" элемент кликнут, потом открыть такой же "по счету" блок текста.
CSS:
#switcher article { display: none; }
HTML:
<nav class="links">
<li>Первый блок</li>
<li>Второй блок</li>
<li>Третий блок</li>
<li>Четвертый блок</li>
</nav>
<section id="switcher">
<article style="display: block;">то что надо показать 1</article>
<article>то что надо показать 2</article>
<article>то что надо показать 3</article>
<article>то что надо показать 4</article>
</section>
JS:
$( "nav.links li" ).on( "click", function(){
var eq = $(this).index(); /* получаем число клинутого "по счету" элемента */
$( "#switcher article" ).hide(); /* скрываем блоки с текстом */
$( "#switcher article" ).eq( eq ).show(); /* открываем аналогичный "по счету" блок с текстом */
});