Переключаемое меню jQuery с элементами подсчета.

У меня есть разметка HTML, близкая к этому:

<ul class="menu">
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
   <li><a href="#">Link 4</a></li>
</ul>

<!-- some other elements and containers here -->

<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
<div class="content">Content 4</div>

К сожалению, я не могу изменить разметку, и мне нужно создать простую функцию переключения. Как лучше всего создать что-то, что работает так:

если пользователь нажимает на первую ссылку из меню, fadeIn() сначала .content на странице,

если пользователь нажимает вторую ссылку из меню, fadeIn() второй .content на странице

(...)

? Обычно я бы использовал пользовательские атрибуты данных, но здесь, я думаю, мне нужно будет как-то подсчитать div и ссылки? Я бы хотел, чтобы это работало для неизвестного количества div/ссылок.


menu toggle jquery
person Wordpressor    schedule 31.10.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать index() и eq() с этим индексом:

http://jsfiddle.net/Hq69e/

$('.menu a').click(function(e) {
    e.preventDefault();

    var idx = $(this).parent().index();    
    $('.content').hide().eq(idx).show();
});

Вот немного более приятная версия с замиранием:

http://jsfiddle.net/Wr6Be/

$('.menu a').click(function(e) {
    e.preventDefault();

    var idx = $(this).parent().index();   

    $('.content:visible').fadeOut(function() {
        $('.content').eq(idx).fadeIn();
    })

});

$('.content:first').show();
person Jason P    schedule 31.10.2013