How To Open A Jquery Tab From A Link That Is Outside The Tab?

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

Solution 1:

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

functionselectTab(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:

<ahref="#"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.

Solution 2:

It looks like you're over-complicating this and trying to recreate the actions of the JQuery UI tabs. You can eliminate all but the inital tabs creation and the click event. The only part of the other JS you have posted that might actually do anything is the fadeIn() As for styling, don't assign and remove the active class, use the .ui-tabs-active class. Style the background color of the li, not the a or your a style will override the li.ui-tabs-active and they will stay grey even on hover/selection. See example here:

See fiddle demo here: http://jsfiddle.net/webchemist/Dpg2W/

Also you have some CSS errors:

#tabslia.active{
        background:#fbfbfb;
        border:px solid #fff;
        border-right:px; /*no numeric value given for # of pixels*/color:#333;
}

.tabDetails{
        background:#fbfbfb;
        border:1px solid #fff;
        margin:34px px; /*no numeric value given for # of pixels in 2nd value*/
}

.tabContents{
        padding:px /*no numeric value given for # of pixels*/
}

.tabContentsh1{
        font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
        padding:00 px;
                                width:auto;

/*no closing brace for .tabContents h1*/

</style>