On refresh of page active tab should remain same

See more:

Javascript

JScript.NET

Hi,

I have some tabs but my problem is when any tab is data is posted back active tab get changed to default. I don't have much knowledge about javascript so any help would be appreciated.

Here is my code:

<div id="tabco4" style="width:772px" >
    <ul>
        <li><a href="javascript:vd()">Profile Details</a></li>
        <li><a href="javascript:vd()">Personal Details</a></li>
        <li><a href="javascript:vd()">Saved   Jobs</a></li>
        <li><a href="javascript:vd()">Applied Jobs</a></li> 
         
    </ul>

What I have tried:

javascript code:

window.onload = function () {
init()
}
var containercolor = "#ffffbd";

function init() {

var border = "#0f0e13 1px solid";
var conbkcolor = "#ffffcc";
var tabbk = "#ff7400";

t4 = new Bindtabs("tabco4", 1, "click", "t", border, tabbk, conbkcolor, "400px");
t4.c();
}

function vd() {
}

function tabEvent(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "");
if (evt) {
var elem = getTargetElement(evt);
var actContainer = (elem.tagName == 'A') ? elem.parentNode.parentNode.parentNode.id : elem.parentNode.parentNode.id;
var tp = gettab(actContainer).position;
var hvelem = (elem.tagName == 'A') ? elem.parentNode : elem;
var lielem = (elem.tagName == 'A') ? elem.parentNode.parentNode.getElementsByTagName('li') : elem.parentNode.getElementsByTagName('li');

if ((evt.type == "mouseover") || (evt.type == "click")) {
actIndex = getIndex(lielem, hvelem);
if (actIndex == undefined) return;

showContent(actContainer, actIndex);
}
}
}


function getIndex(arry, elem) {
for (var i = 0; i < arry.length; i++) {
if (arry[i] == elem) {
return i;
}
}
}

function showContent(container, act) {
var contDiv = new Array;
var j = 0;
var tab = gettab(container);
var tp = tab.position;
var vborder = tab.border;
var vboxwidth = tab.width;
var vtabcolor = tab.tabcolor;
var contDiv0 = $$($(container), ('div'));


for (var i = 0; i < contDiv0.length; i++) {
if (contDiv0[i].parentNode.id == container) {
contDiv[j] = contDiv0[i];
j = j + 1;
}
}

contDiv[act].className = "content";

var vbkcolor = getbkColor(contDiv[act]);
var tagul = getUL(container, tp);
var tagula = $$(tagul, ('a'));
var tagulli = $$(tagul, ('li'));

for (var i = 0; i < tagula.length; i++) {
tagula[i].className = "ula";
}

for (var i = 0; i < tagulli.length; i++) {
tagulli[i].className = "ullifloat";
}
tagul.className = "ulnofloat";

$(container).style.borderRight = (ie6() == true) ? containercolor + " 0px solid" : containercolor + " 2px solid";

contDiv[act].style.display = "block";

for (var i = 0; i < contDiv.length; i++) {
if (i != act) {
contDiv[i].style.display = "none";
}
}

var actitem = tagulli[act];

var actitema = $$(actitem, ('a'))[0];

actitema.style.top = "1px";

actitem.style.borderTop = vborder;

actitema.style.backgroundColor = vbkcolor;
var marginRight_li = getmarginRight(actitem);
var marginBottom_li = getmarginBottom(actitem);

for (var i = 0; i < tagulli.length; i++) {

if (marginRight_li == "0px") {

tagulli[i].style.borderLeft = (i == 0) ? vborder : "#fff 0px";

}


if (i != act) {

var a = $$(tagulli[i], 'a')[0];

a.style.top = "0px";
a.style.left = "0px";

a.style.backgroundColor = vtabcolor;

tagulli[i].style.borderTop = vborder;

}

}
}

function bindEvent(container, e) {

var tp = gettab(container).position;
var ele = $$(getUL(container, tp), 'li');

for (var i = 0; i < ele.length; i++) {
if (e == "click") {
ele[i].onmouseover = "";
ele[i].onclick = tabEvent;
}
if (e == "mouseover") {
ele[i].onmouseover = tabEvent;
}
}
}


function Bindtabs(id, activetab1, eventType, position, border, tabcolor, bkcolor, width) {
this.id = id;
this.activetab1 = activetab1;
this.eventType = eventType;
this.position = position;
this.border = border;
this.tabcolor = tabcolor;
this.bkcolor = bkcolor;
this.width = width;

this.c = function () {

showContent(this.id, this.activetab1);

bindEvent(this.id, this.eventType);

}
}

function getUL(id, ttp) {

if ((ttp == "t") || (ttp == "l") || (ttp == "p")) {
var ul = $$($(id), ('ul'))[0];
}
else {
var n = $$($(id), ('ul')).length;
var ul = $$($(id), ('ul'))[n - 1];

}
return ul;
}

function gettab(id) {
return (id == "tabco4") ? t4 : t1;
}

function ie6() {
var appVer = navigator.appVersion.toLowerCase();
var iePos = appVer.indexOf('msie');
if (iePos != -1) {
is_minor = parseFloat(appVer.substring(iePos + 5, appVer.indexOf(';', iePos)))
is_major = parseInt(is_minor);
}

var is_ie = ((iePos != -1));
var is_ie6 = (is_ie && is_major == 6);
return is_ie6;
}

function getmarginBottom(obj) {
return (obj.currentStyle) ? obj.currentStyle.marginBottom : getComputedStyle(obj, '').getPropertyValue('margin-bottom');
}

function getmarginRight(obj) {
return (obj.currentStyle) ? obj.currentStyle.marginRight : getComputedStyle(obj, '').getPropertyValue('margin-right');
}

function getbkColor(obj) {
return (obj.currentStyle) ? obj.currentStyle.backgroundColor : getComputedStyle(obj, '').getPropertyValue('background-color');
}

function getTargetElement(evt) {
return (evt.target) ? ((evt.target.nodeType == 3) ? evt.target.parentNode : evt.target) : evt.srcElement;
}

function $(id) { return (document.getElementById(id)); }
function $$(e, tag) { return e.getElementsByTagName(tag); }