Question

I have found a nice tabs system (link to the tab system) on the internet to let the users navigate through my website. However I am not that good in coding. I have somehow managed to get things working.

I am trying/ tweaking for two days to get it working. Recording to this code I would be able to make a link that will open a specified tab. How could you make a link that -when clicked on it- would open the specified tab.

This code will do the trick but do not know how to implement this code in my existing Javascript code.

CODE:

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

Found this code at this website

HTML CODE:

<div id="tabs">

    <ul>
        <li><a class="active" href="#tab1">HOME</a></li>
        <li><a href="#tab2">SERVICES</a></li>
        <li><a href="#tab3">OPTIONS</a></li>
            <li><a href="#tab4">ABOUT US</a></li>
            <li><a href="#tab5">CONTACT US</a></li>
    </ul><!-- //Tab buttons -->

    <div class="tabDetails">
        <div id="tab1" class="tabContents">
                <h1>Title1</h1>
                <iframe src="Home.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab1 -->
        <div id="tab2" class="tabContents">
                <h1>Title2  </h1>
                <h2>  </h2>
                <h3>  </h3>
                <iframe src="Services.html" width="1150" height="640" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab2 -->
        <div id="tab3" class="tabContents">
               <h1>Title3</h1>
               <iframe src="Options.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab3 -->
        <div id="tab4" class="tabContents">
            <h1>Title4 </h1>
            <iframe src="Aboutus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab4 -->
        <div id="tab5" class="tabContents">
            <h1>Title5</h1>
           <iframe src="Contactus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab5 -->
    </div><!-- //tab Details -->
</div><!-- //Tab Container -->

CSS:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tab</title>
<style type="text/css">
*{margin:10; padding:0;}

body{

    font:normal 14px/1.5em Arial, Helvetica, sans-serif;
}
a{outline:none;}

#tabs{
    background:#f0f0f0;
    border:1x solid #fff;
    margin:100px auto;
    padding:20px;
    position:absolute;
    width:1315px;
}
    #tabs ul{
        overflow:hidden;
        border-left:0px solid #fff;
        height:80px;
        position:center;
        z-index:100;
    }
    #tabContaier li{
        float:left;
        list-style:none;
    }
    #tabs li a{
        background:#ddd;
        border:3px solid #ffff;
        border-left:0;
        color:#666;
        cursor:pointer;
        display:block;
        height:35px;
        line-height:35px;
        padding:0 98px;
        text-decoration:none;
        text-transform:bold;
    }
    #tabs li a:hover{
        background:#fff;
    }
    #tabs li a.active{
        background:#fbfbfb;
        border:px solid #fff;
        border-right:px;
        color:#333;
    }
    .tabDetails{
        background:#fbfbfb;
        border:1px solid #fff;
        margin:34px px;
    }
    .tabContents{
        padding:px

}
    .tabContents h1{
        font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
        padding:0 0 px;
                                width:auto;



</style>

JAVASCRIPT CODE:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$( ".selector" ).tabs( "refresh" );

    // Hide all tab conten divs by default
    $(".tabContents").hide(); 

    // Show the first div of tab content by default
    $(".tabContents:first").show(); 

    //Fire the click event
    $("#tabContaier ul li a").click(function(){ 

        // Catch the click link
        var activeTab = $(this).attr("href"); 

        // Remove pre-highlighted link
        $("#tabContaier ul li a").removeClass("active"); 

        // set clicked link to highlight state
        $(this).addClass("active");         

        // hide currently visible tab content div
        $(".tabContents").hide(); 

        // show the target tab content div by matching clicked link.
        $(activeTab).fadeIn(); 
 return false;


    });
});
</script>

Answer 1

Your problem was you were selecting the tab with a different jquery tab. Use this Javascript function to change the selected tab.

function selectTab(tabIndex) {
    var selector = "a[href='#tab" + tabIndex + "']";
    var tab = "#tab" + tabIndex;
    $("#tabContaier ul li a").removeClass("active");
    $(selector).addClass("active");
    $(".tabContents").hide();
    $(tab).fadeIn();
}

Link:

<a href="#" onclick="selectTab(2);" >Go to tab 2</a>

This will work if you use the same link nomenclature as you are using now (href for links as “tab1, tab2” etc, and the divs named “tab1, tab2” etc…
Good luck.