How do i set the active tab in a tab container without using the index of the tab?

Question

I have a tab container, call it tbcSP. it has three panels, each with id's that run offIss, workIss and katIss.

Now, I use a link to go to the page where the tab container is kept, using a query string. There I have no issues. I can get the id of the panel from the link/query string (example: click the kitchen link on default.aspx and get a query string ../staff.aspx?id=katIss). I can get the katIss

Now, I've read and read and seen only examples of how to set an active tab using the index of the tabs. But how can I do it if I have the id of the tab?

Is there a way to make an array and find the index if the id is the same? or, and I've tried this, is there another way of saying: $find("tbcSP")._tabs[--what here--]._show()

Here is my script language so far:

<script type="text/javascript">
        function pageLoad() {
            var surl = unescape(window.location);
            var con = surl.substr(surl.indexOf("id=")+3, surl.length);
            findTab(con);
        }

        function findTab(con) {
            alert(con);
            if (con != "") {
               $find("tbcSP")._tabs[0]._show();

            }
        }
    </script>

That, as I say, gets me katIss or whichever link I clicked. But assuming I don't know the index, how do I set the active tab?

Thanks in advance

Answer 1

If you have the id of the tab, you can simply set a class on the element with the id.

var id; // assume has a value
document.getElementById(id).className = 'active';

Then use CSS to style you active tab and your inactive tabs.

.tab {
    /* CSS for inactive tabs */
    color:gray;
}
.tab.active {
    color:black;
}