ссылки из вкладок jquery не открывают другие вкладки

Question

Ниже приведен код, который я использую.Прямо сейчас раздел вкладок работает нормально, и он переключался между вкладками.Проблема в том, что у меня есть изображение в div с классом «showMem» внизу каждой вкладки.Эта ссылка должна открывать последнюю вкладку, но она не работает.Код, который я получил для открытия вкладки, находится здесь JQuery Docs .Любая идея?Заранее спасибо.

 <script type="text/javascript">
    $(document).ready(function () {

    var $tabs = $('#tabs').tabs(); // first tab selected

        $('.showMem').click(function() { // bind click event to link
            $tabs.tabs('select', 4); // switch to third tab
            return false;
                }).css({
                    cursor : 'pointer'
        });

        var $items = $('#tabs>ul>li');
        var $theImg = $('#tabs>ul>li>a>img');
        $items.click(function () {
            $items.removeClass('selected');
            $(this).addClass('selected');
            if ($items.index($(this)) == 0) { //Intro

                $items.removeClass('tab1Selected');
                $items.removeClass('tab2Selected');
                $items.removeClass('tab3Selected');
                $items.removeClass('tab4Selected');
                $items.removeClass('tab5Selected');
                $(this).addClass('tab1Selected');

            }
            else if ($items.index($(this)) == 1) { //About
                $items.removeClass('tab1Selected');
                $items.removeClass('tab2Selected');
                $items.removeClass('tab3Selected');
                $items.removeClass('tab4Selected');
                $items.removeClass('tab5Selected');
                $(this).addClass('tab2Selected');
            }
            else if ($items.index($(this)) == 2) { //Content
                $items.removeClass('tab1Selected');
                $items.removeClass('tab2Selected');
                $items.removeClass('tab3Selected');
                $items.removeClass('tab4Selected');
                $items.removeClass('tab5Selected');
                $(this).addClass('tab3Selected');
            }
            else if ($items.index($(this)) == 3) { //New Format
                $items.removeClass('tab1Selected');
                $items.removeClass('tab2Selected');
                $items.removeClass('tab3Selected');
                $items.removeClass('tab4Selected');
                $items.removeClass('tab5Selected');
                $(this).addClass('tab4Selected');
            }
            else if ($items.index($(this)) == 4) { //Membership
                $items.removeClass('tab1Selected');
                $items.removeClass('tab2Selected');
                $items.removeClass('tab3Selected');
                $items.removeClass('tab4Selected');
                $items.removeClass('tab5Selected');
                $(this).addClass('tab5Selected');
            }
            var index = $items.index($(this));
            $('#tabs>div').hide().eq(index).show();
        }).eq(0).click();

    });
</script> 



 <div id="tabs" class="ui-tabs">
    <img src="myimage.jpg" />
    <ul class="ui-tabs-nav">
        <li class="tab1"></li>
        <li class="tab2"></li>
        <li class="tab3"></li>
        <li class="tab4"></li>
        <li class="tab5"></li>
    </ul>

    <div id="tabs-1">
       <div class="showMem">image</a>
    </div>
    <div id="tabs-2">
        <p>blah blah blah</p>
        <div class="showMem">image</div>
    </div>
    <div id="tabs-3">
        <p>Blah blah blah </p>
        <div class="showMem">image</div>
    </div>
    <div id="tabs-4">
        <p>blach blah blach</p>
        <div class="showMem">image</div>
    </div>
    <div id="tabs-5">
        <p>blah</p>
        <div class="showMem">image</div>
    </div>
</div>

Answer 1

Я не уверен, что это была ошибка копирования и вставки, но я обнаружил, что несколько ошибок не так.Я вставил ваш код в JsFiddle , разметка была неправильной, у вас были некоторые проблемы с вложением, якоря не присутствовали на вкладках, поэтому они не работали

В некоторых местах вы начинаетеотключите ссылку на изображение как div и завершите как закрывающий тег «a».

<div class="showMem">image</a>

Вы также, кажется, пытались реализовать свою собственную систему вкладок поверх использования вкладок пользовательского интерфейса jquery.Это не нужно.Я бы порекомендовал использовать FireBug , если вы этого еще не сделали.Это сразу показало, что ваша разметка была неправильной.После этого все было очень просто.

Вы можете видеть, что когда вы применяете вкладки jquery ui, он добавляет несколько классов css к вашим элементам.Вы должны либо включить стандартную CSS, либо написать свои собственные классы, чтобы заставить поведение работать.В JsFiddle я просто убрал вашу разметку, добавил несколько якорей к вкладкам, чтобы они работали, и добавил несколько CSS, чтобы они выглядели как вкладки.

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

Я также отредактировал ваш собственный jsfidde здесь и добавил комментарии к разметке, чтобы показать вам, где вы ошибаетесь.

Надеюсь, это поможет.