Home/ Questions/Q 6137263
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T17:42:12+00:00

Below is the code I’m using. Right now the tabs section works fine and

  • 0

Below is the code I’m using. Right now the tabs section works fine and it switched between tabs. The problem is I have a image in a div with a class called “showMem” at the bottom of every tab. That link is supposed to open up the last tab but its not working. The code I got for opening the tab is here JQuery Docs. Any idea? Thank you in advance. 

 <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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not sure if this was a copy and paste error but I found a few things wrong. I pasted your code into JsFiddle, the markup was incorrect, you had some div nesting issues, the anchors were not present in the tabs so they didn’t work

    In some places you start off the image link as a div and finish as a closing ‘a’ tag.

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

    You also seem to have tried to implement your own tab system ontop of using the jquery
    UI tabs. This is unnecessary. I would recommend using FireBug if you don’t already. This showed instantly that your markup was wrong. After that it was very straight forward.

    You can see that when you apply jquery ui tabs it adds a number of css classes to your elements. It’s up to you to either include the standard css or write your own classes to make the behavior work. In the JsFiddle I simple tidied up your markup, added some anchors to the tabs to make them work, and added some css to make them look like tabs.

    EDIT

    I also edited your own jsfidde here and added comments to the markup to show you where you were going wrong.

    Hope this helps.

    • 0