仅显示要单击的选项卡的内容

Question

I am trying to use tab navigation and based on which tab is clicked, I need to show content based on that tab and hide the content belong to other tabs. I have included tab section, inner html where tab content goes and javascript to do this. Not working, any ideas what I am missing? tab section of the page

<ul class="wui-tab-nav">
    <li class="wui-first"><a class="wui-link" href="index.html">Home </a></li>
    <li class="wui-sub" id="vol"><a class="wui-link" href="#Vol" rel="tabs1">Business Volume </a></li>
    <li class="wui-sub"><a class="wui-link" href="#Vol2"  rel="tabs2">Infras Volume</a></li>
    <li class="wui-sub"><a class="wui-link" href="#Vol3"  rel="tabs3" >Database Volume</a></li>
    <li class="wui-sub"><a class="wui-link" href="#Vol4"  rel="tabs4">Customer Volume</a></li>
</ul>

Div section to put the tab content

<DIV id=chart class=wui-inpage-container style="float:left; display: block; overflow: hidden; padding:0; margin:0 auto; border:0;">
    <ul class="tab-content" id="tabs1"> 
            <li id="business_vol1"></li>
            <li id="business_vol2"></li>
            <li id="business_vol3"></li>
            <li id="business_vol4"></li>    
    </ul>

    <ul class="tab-content" id="tabs2"> 
            <li id="Infras1"></li>
            <li id="Infras2"></li>
            <li id="Infras3"></li>                    
    </ul>
</DIV>

javascripts to show only the click tab content

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

        $('.wui-link a').click(function () {
            switch_tabs($(this));
        });

        switch_tabs($('#vol'));

    });
</script>

<script type="text/javascript">
    function switch_tabs(obj) {
        $('.tab-content').hide();
        $('.tab-content a').removeClass("selected");
        var id = obj.attr("rel");

        $('#' + id).show();
        obj.addClass("selected");
    } 
</script>

Answer 1

You can make function to hide all divs of content (jquery .hide() ) and then on click on li you would call jquery .show() function to show div with ceratin ID. Then on clicking on another li you need to hide everything again and show only one div. Hope I helped you

Answer 2

You are running the first iteration on #vol which isnt the <A> , but the containing div . This div, #vol does not have a rel="" to complete the function.

Otherwise, it looks okay. Maybe throw in some alert()'s to make sure you are getting the correct data at some break points.

Change:

switch_tabs($('#vol'));

To:

switch_tabs($('.wui-link:first'));

and test

Answer 3

Change

$('.wui-link a').click()

to

$('a.wui-link').click()