I want to activate tab menu item on a button click

Question

Hi i have a tab menu and i wanted to activate tab 2 when i click on a button from tab 1..

here is my javascript:

<link rel="stylesheet" type="text/css" href="http://oliveshades.com/dashboard_menu.css">
<script type='text/javascript' src="http://oliveshades.com/jquery.idTabs.min.js"></script>

<script type='text/javascript'>
function toggle_visibility(id) {
    var thelist = document.getElementsByClassName("alist");
    for (var i = 0; i < thelist.length; i++) {
        thelist[i].style.display = 'none';
    }
    var e = document.getElementById(id);
    if (e.style.display == 'block') {
        e.style.display = 'none';
    } else {
        e.style.display = 'block';
    }
}</script>

here is my HTML:

<div class="dashTab">
<ul class="idTabs">
  <li><a href="#tab1">Statistics</a></li>
  <li><a href="#tab2">Traffic</a></li>
</ul></div>

<div id="tab1"><input name="" type="button" value="redirect me to tab 2" /></div>
<div id="tab2">This is Tab2</div>

http://jsfiddle.net/UCjYS/

Answer 1

idTabs doesn't seem to have methods to activate a tab, but you can trigger it manually.

$('#tab1 input').click(function(){
  $('li:contains("Traffic")').click();
  return false;
});

Answer 2

Try this:

function changeTab(arg){
    switch(typeof arg){
        case "number":
            $('.idTabs > li:eq(' + arg + ') > a').click();
            break;
        case "string":
            $('.idTabs > li:contains(' + arg + ') > a').click();
            break;
    }
}

http://jsfiddle.net/DerekL/UCjYS/1/