刷新页面时，活动选项卡应保持不变 [英] On refresh of page active tab should remain same

问题描述

我有一些标签，但我的问题是当任何标签数据被回发时活动标签变为默认值。我对javascript知之甚少，所以任何帮助都会受到赞赏。



这是我的代码：

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>

我的尝试：



javascript代码：



window.onload = function（）{

init（）

}

var containercolor =＃fffbd;



函数init（）{



var border =＃0f0e13 1px solid;

var conbkcolor =＃ftffcc;

var tabbk =＃ff7400;



t4 = new Bindtabs（ta bco4，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）;

}

}

}





函数getIndex（arry，elem）{

for（var i = 0; i< arry.length; i ++）{

如果（arry [i] == elem）{

返回i;

}

}

}



函数showContent（容器，行为）{

var contDiv = new数组;

var j = 0;

var tab = gettab（容器）;

var tp = tab.position;

var vborder = tab.border;

var vboxwidth = tab.width;

var vtabcolor = tab.tabcolor;

var contDiv0 = $$（$（容器），（'div'））;





for（var i = 0;我< 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;



$（容器）.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：＃ff 0px;



}





if （i！=行动）{



var a = $$（tagulli [i]，'a'）[0];



a.style.top =0px;

a.style.left =0px;



a.style.backgroundColor = vtabcolor;



tagulli [i] .style.borderTop = vborder;



}



}

}



函数bindEvent（容器，e）{



var tp = gettab（容器）.position;

var ele = $$（getUL（container，tp） ，'li'）;



for（var i = 0; i< ele.length; i ++）{

if（e ==点击）{

ele [i] .onmouseover =;

ele [i] .onclick = tabEvent;

如果（e ==mouseover）$

ele [i] .onmouseover = tabEvent;

}

}

}





函数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）;



}

}



函数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];



}

返回ul;

}



函数gettab（id）{

return（id ==tabco4）？ t4：t1;

}



函数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）;

返回is_ie6;

}



函数getmarginBottom（obj）{

return（ obj.currentStyle）？ obj.currentStyle.marginBottom：getComputedStyle（obj，''）。getPropertyValue（'margin-bottom'）;

}



函数getmarginRight （obj）{

return（obj.currentStyle）？ obj.currentStyle.marginRight：getComputedStyle（obj，''）。getPropertyValue（'margin-right'）;

}



函数getbkColor （obj）{

return（obj.currentStyle）？ obj.currentStyle.backgroundColor：getComputedStyle（obj，''）。getPropertyValue（'background-color'）;

}



函数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）; }

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); }

推荐答案

（

（container），（'div'））;

< （b =（var i = 0; i< contDiv0.length; i ++）{

if（contDiv0 [i] .parentNode.id）


==容器）​​{

contDiv [j] = contDiv0 [i];

j = j + 1;

}

}



contDiv [act] .className =content;



var vbkcolor = getbkColor（contDiv [act]）;

var tagul = getUL（container，tp）;

var tagula =

(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, ('a'));
var tagulli =

这篇关于刷新页面时，活动选项卡应保持不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！