Javascript - Display div



我需要检查onload是否有锚在URL中,以便在需要时打开选项卡。问题是,如果用户在启动onload函数之前打开了一个选项卡,则该选项卡将关闭,用户需要再次打开它。如何解决?

HTML:

<body onload="checkurl()">

JS:

 function checkurl(){
    if (window.location.hash == '#about')
    {
    showhide('secabout');
    }
    else if (window.location.hash == '#contact')
    {
    showhide('seccontact');
    }
    }

JS函数:

var divState = {}; 
function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);
        divState[id] = (divState[id]) ? false : true; 
        for (var div in divState){
            if (divState[div] && div != id){ 
                document.getElementById(div).style.display = 'none'; 
                divState[div] = false; 
            }
        }
        divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
    }
}

谢谢。Uli

我很确定<脚本>标签在<头部>在onload()之前立即执行,所以请尝试。

您可以用一个额外的参数来调用该函数,以确保它会显示在您的加载函数中。

然后检查全局initialized变量,以检查用户在从checkurl函数运行时是否已经执行了该函数。如果用户单击的选项卡与URL中指定的选项卡不同,则需要执行此操作。

此外,在底部更新divid.style.display时,您需要检查divState[id]而不是divid.style.display == 'block'

function checkurl(){      
  if (window.location.hash == '#about')      
  {      
    showhide('secabout', true);      
  }      
  else if (window.location.hash == '#contact')      
  {      
    showhide('seccontact', true);      
  }      
}      
var divState = {};   
var initialized = false;
function showhide(id, initialize) {  
  if(initialized && initialize) return;
  initialized = true;
  if (document.getElementById) {  
    var divid = document.getElementById(id);  
    divState[id] = (divState[id]) ? false : true; 
    for (var div in divState){  
      if (divState[div] && div != id){   
        document.getElementById(div).style.display = 'none';   
        divState[div] = false;   
      }  
    }  
    if(initialize){ 
      divid.style.display = 'block';  
    } else { 
      divid.style.display = (divState[id] ? 'block' : 'none');  
    } 
  }  
}  

最新更新