Change the style of the tab for all tabs except the one on which it is called

advertisements

So I have a few tabs. There can be multiple tabs, but I currently have 3. What I am trying to do is to change the styling of the tab when it is clicked and the other tabs to have some other styling. My code is as follows:

    <div id="ClaimTabs" class="TabbedPanels">

        <div class="TabbedPanelsTabGroup">
            <div id="list1" class="TabbedPanelsTab TabbedPanelsTabSelected">
            <a id="anchor1" class="TabbedPanelAnchor" href="javascript:showTab(1);">Tab 1 </a>
            </div>

            <div id="list2" class="TabbedPanelsTab">
            <a id="anchor2" href="javascript:showTab(2);" >Tab 2</a>
            </div>

            <div id="list3" class="TabbedPanelsTab">
            <a id="anchor3" href="javascript:showTab(3);">Tab 3</a>
            </div>

        </div>

        <div id="ClaimContent" class="TabbedPanelsContentGroup">
            <div id="tab1" class="TabbedPanelsContent TabbedPanelsContentVisible" style="display: block;">
            Screen 1
            </div>

            <div id="tab2" class="TabbedPanelsContent" style="display: none;">
            Screen 2
            </div>

            <div id="tab3" class="TabbedPanelsContent" style="display: none;">
            Screen 3
            </div>

        </div>
    </div>

My script that manipulates the styling is as follows:

function showTab(tabNumber) {
        var children = document.getElementById('TabbedPanelsTabGroup').childNodes;

        document.getElementById('tab'.concat(tabNumber)).style.display = 'block';
        document.getElementById('list'.concat(tabNumber)).setAttribute("class", "TabbedPanelsTab TabbedPanelsTabSelected");
        document.getElementById('anchor'.concat(tabNumber)).setAttribute("class", "TabbedPanelAnchor");

        for(i=1; i <= children.length ; i++)
            {
                if(i != tabNumber){

                    document.getElementById('tab'.concat(i)).style.display = 'none';
                    document.getElementById('list'.concat(i)).setAttribute("class", "TabbedPanelsTab");
                    document.getElementById('anchor'.concat(i)).setAttribute("class", "");
                    }
            }
        }

I was wondering if my logic is right. I am concatenating the tab, list and anchor with the number and updating styles. But this does not seem to be working.


You appear to have at least two problems here.

First, you're trying to use document.getElementById for TabbedPanelsTabGroup, but that's a class.

Second, you're using .childNodes when you are probably looking for .children. .childNodes includes all child nodes, including the text inside the tags (which is a node). So when you use that number to loop over it, your loop isn't counting to 3 (your # of divs), it's counting to 7, and that's giving errors.

But, .children isn't supported before IE9, so like others have suggested, you may want to consider jQuery to get at that with better support.