# Tabs not working well

**URL:** <https://forum.kirupa.com/t/tabs-not-working-well/261757>\
**Category:** Uncategorized\
**Created:** [May 30, 2008, 3:27pm UTC](https://forum.kirupa.com/t/tabs-not-working-well/261757 "2008-05-30T15:27:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bear](https://avatars.discourse-cdn.com/v4/letter/b/ac8455/32.png) [@bear](https://forum.kirupa.com/u/bear)\
**Post date:** [May 30, 2008, 3:27pm UTC](https://forum.kirupa.com/t/tabs-not-working-well/261757/1 "2008-05-30T15:27:40Z")

</div>

Whenever I click on the tabs to activate this function, it disappears in IE instead of showing the image. Any ideas of what could be happening?

```auto
function tabsBrowse(strTab)
    {// tabbed browsing for the top 3 drinks(search.php)
        
        // get all the 
        /*
        var divNew = document.getElementById("divRecent1");
        var divRec = document.getElementById("divRecent2");
        */
// var divRec = document.getELementById("");        
        switch(strTab)
        {
            case "new":
            //alert('new');
            
            document.getElementById("divRecent1").style.display = "block";
            document.getElementById("divRecent2").style.display = "none";
            // IMAGE SWITCH
            document.getElementById("imgsNewDrk").src = root +"/images/root/tab_off.gif";
            document.getElementById("imgsNewDrk1").src = root + "/images/root/tab_on.gif";
            
            break; 
            
            case "season":
            document.getElementById("divRecent1").style.display = "none";
            document.getElementById("divRecent2").style.display = "block";
             // IMAGE SWITCH
            document.getElementById("imgsNewDrk").src = root + "/images/root/tab_on.gif";
            document.getElementById("imgsNewDrk1").src = root + "/images/root/tab_off.gif";
            
            break;
        }
    }

```

---

<div class="post-metadata">

**Author:** ![bear](https://avatars.discourse-cdn.com/v4/letter/b/ac8455/32.png) [@bear](https://forum.kirupa.com/u/bear)\
**Post date:** [May 30, 2008, 8:00pm UTC](https://forum.kirupa.com/t/tabs-not-working-well/261757/2 "2008-05-30T20:00:56Z")

</div>

bump?

---

<div class="post-metadata">

**Author:** ![bear](https://avatars.discourse-cdn.com/v4/letter/b/ac8455/32.png) [@bear](https://forum.kirupa.com/u/bear)\
**Post date:** [May 31, 2008, 4:23pm UTC](https://forum.kirupa.com/t/tabs-not-working-well/261757/3 "2008-05-31T16:23:18Z")

</div>

http;[//drinklab.net](https://drinklab.net)

the site I’m trying to get this to work on.

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [May 31, 2008, 6:58pm UTC](https://forum.kirupa.com/t/tabs-not-working-well/261757/4 "2008-05-31T18:58:15Z")

</div>

Works in IE7 but throws “root undefined”, which looking at the JS you posted seems to be true. Firebug shows the same error (but Firefox is nice enough to ignore the error). You need to check where/if you are defining root and fix that. On a side note, it’s confusing that you can’t click the entire tab to switch them, just a tiny portion of the body does the actual change. The div is over the image (z-index), so you should probably put your onclick on the div. Here is the first div you should add it to:

```auto

<div id="apDiv2" style="position: absolute; left: 45px; top: 633px; width: 186px; height: 24px; z-index: 99; text-align: center; font-weight: bold; color: white; padding-top: 4px;">

```

---

<div class="post-metadata">

**Author:** ![bear](https://avatars.discourse-cdn.com/v4/letter/b/ac8455/32.png) [@bear](https://forum.kirupa.com/u/bear)\
**Post date:** [June 2, 2008, 1:42pm UTC](https://forum.kirupa.com/t/tabs-not-working-well/261757/5 "2008-06-02T13:42:24Z")

</div>

[quote=actionAction;2334126]Works in IE7 but throws “root undefined”, which looking at the JS you posted seems to be true. Firebug shows the same error (but Firefox is nice enough to ignore the error). You need to check where/if you are defining root and fix that. On a side note, it’s confusing that you can’t click the entire tab to switch them, just a tiny portion of the body does the actual change. The div is over the image (z-index), so you should probably put your onclick on the div. Here is the first div you should add it to:

```auto

<div id="apDiv2" style="position: absolute; left: 45px; top: 633px; width: 186px; height: 24px; z-index: 99; text-align: center; font-weight: bold; color: white; padding-top: 4px;">

```

[/quote]

Fixed that, but it keeps disappearing in IE 6. IE 6 is the standard that I’m using for this project.

UPDATE:  
It’s cool! Got her to work. I misspelled a variable name.