JQuery Tabs, проблема изменения выбранного элемента

Question

Я использую http://jqueryfordesigners.com/jquery-tabs/ для проекта, код табуляции выглядит так: -

<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();

$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();

});
</script>

Это прекрасно работает, но дизайн требует, чтобы я вставил выбранный класс в тег li, а не тег. Когда я изменяю скрипт, чтобы сделать это, показывать / скрывать для каждой вкладки разрывы. Есть мысли о том, что еще нужно изменить? Заранее спасибо.

<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();

$('div.tabs ul.tabNavigation li').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation li').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();

});
</script>

Answer 1

Немного сложно ответить на ваш вопрос без дополнительной информации. Самая важная недостающая информация - это ваши текущие HTML и CSS, так как теперь можно только догадываться, почему она не работает.

Как уже упоминал gnarf, ваш код должен немного измениться, чтобы он работал с примером HTML и CSS, используемым страницей, с которой вы получили этот код:

<script type="text/javascript" charset="utf-8">
$(function () {
        var tabContainers = $('div.tabs > div');
        tabContainers.hide().filter(':first').show();

        $('div.tabs ul.tabNavigation li a').click(function () {
            tabContainers.hide();
            tabContainers.filter(this.hash).show();
            $('div.tabs ul.tabNavigation li').removeClass('selected');
            $(this).closest('li').addClass('selected');
            return false;
        }).filter(':first').click();

    });
</script>

Кроме того, ваш css также должен измениться, поскольку класс selected теперь установлен на LI, а не на A. Интересно, почему вы не используете плагин tab, предоставляемый JQuery UI. Он позволяет вам настраивать множество вещей и вряд ли требует какого-либо кода.

Answer 2

Вы получаете доступ к this.hash на <li>, что не даст того, что вы хотите.

Ваша функция должна немного измениться:

$(function () {
  var tabContainers = $('div.tabs > div');
  tabContainers.hide().filter(':first').show();

  // you still want to bind to the "a" element, not the li
  $('div.tabs ul.tabNavigation a').click(function () {
    tabContainers.hide();
    // this.hash is the #whatever portion of the href
    tabContainers.filter(this.hash).show();

    // remove selected class from LI's
    $('div.tabs ul.tabNavigation li').removeClass('selected');

    // look for our closest li parent (jQuery 1.3+) and add the selected class.
    $(this).closest('li').addClass('selected');

    return false;
  }).filter(':first').click();

});