Javascript 基于url显示特定的div

Javascript 基于url显示特定的div,javascript,url,html,Javascript,Url,Html,我需要在单击按钮时显示一个特定的div,仅当url位于某个成员配置文件上时。如果它不在配置文件页面上,则显示另一个将显示错误消息的div。我已经写了很长时间了,因为我不太擅长javascript。下面的代码有两个问题: 1) 只有第一个url将显示正确的div,而不是or(| |)后面的url? 2) 无论您在哪个页面上,都会显示错误消息的else代码 请帮忙 function showdiv() { if ((window.location.href == "http://google

我需要在单击按钮时显示一个特定的div,仅当url位于某个成员配置文件上时。如果它不在配置文件页面上,则显示另一个将显示错误消息的div。我已经写了很长时间了,因为我不太擅长javascript。下面的代码有两个问题:

1) 只有第一个url将显示正确的div,而不是or(| |)后面的url? 2) 无论您在哪个页面上,都会显示错误消息的else代码

请帮忙

function showdiv() {
    if ((window.location.href == "http://google.com/profile/AA") || (window.location.href == "http://google.com/profile/AA/?xg_source=profiles_memberList")) {
        document.getElementById('AA').style.display = 'block';
        if (document.getElementById('AA').style.display == 'none') document.getElementById('AA').style.display = 'block';
        else document.getElementById('AA').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/BB") || (window.location.href == "http://google.com/profile/BB/?xg_source=profiles_memberList")) {
        document.getElementById('BB').style.display = 'block';
        if (document.getElementById('BB').style.display == 'none') document.getElementById('BB').style.display = 'block';
        else document.getElementById('BB').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/CC") || (window.location.href == "http://google.com/profile/CC/?xg_source=profiles_memberList")) {
        document.getElementById('CC').style.display = 'block';
        if (document.getElementById('CC').style.display == 'none') document.getElementById('CC').style.display = 'block';
        else document.getElementById('CC').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/DD") || (window.location.href == "http://google.com/profile/DD/?xg_source=profiles_memberList")) {
        document.getElementById('DD').style.display = 'block';
        if (document.getElementById('DD').style.display == 'none') document.getElementById('DD').style.display = 'block';
        else document.getElementById('DD').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/EE") || (window.location.href == "http://google.com/profile/EE/?xg_source=profiles_memberList")) {
        document.getElementById('EE').style.display = 'block';
        if (document.getElementById('EE').style.display == 'none') document.getElementById('EE').style.display = 'block';
        else document.getElementById('EE').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/FF") || (window.location.href == "http://google.com/profile/FF/?xg_source=profiles_memberList")) {
        document.getElementById('FF').style.display = 'block';
        if (document.getElementById('FF').style.display == 'none') document.getElementById('FF').style.display = 'block';
        else document.getElementById('FF').style.display = 'block';
    }
    else {
        document.getElementById('error').style.display = 'block';
        if (document.getElementById('error').style.display == 'none') document.getElementById('error').style.display = 'block';
        else document.getElementById('error').style.display = 'block';
    }
}

这段代码将是一个需要维护的噩梦。您可能会更幸运地将其组织成这样:

function getId() {
    var href = window.location.href;
    if (href.indexOf('?') != -1) {
        //remove any url parameters
        href = href.substring(0, href.indexOf('?'));
    }
    if (href.charAt(href.length - 1) == '/') {
        //check for a trailing '/', and remove it if necessary
        href = href.substring(0, href.length - 1);
    }
    var parts = href.split("/");
    return parts[parts.length - 1];  //last array element should contain the id 
}

function showdiv(){
    var id = getId();
    var elem = document.getElementById(id);
    if (elem) {
        if (elem.style.display == 'none') {
            elem.style.display = 'block';
        }
        else {
            elem.style.display = 'none';
        }
    }
    else {
        if (document.getElementById('error').style.display == 'none') {
            document.getElementById('error').style.display='block'; 
        }
        else {    
            document.getElementById('error').style.display='none';
        }
    }
}

你应该先弄清楚逻辑

这个代码毫无意义

document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') {
    document.getElementById('AA').style.display = 'block';
}
else {
    document.getElementById('AA').style.display = 'block';
}
在结构上,它与本规范类似(简化并带有注释)


另外,请尝试将@aroth很好地演示的代码重复部分考虑在内。

Hi。看起来您应该检查整个代码。这可以在没有任何IF的情况下通过解析URL来完成。非常感谢您,这段代码肯定解决了我的一个问题:)。具有超过基本id的页面(如“”仍然无法显示正确的div:(有什么想法吗?@webtesa-我已经更新了代码来处理这种情况。原始版本假设如果存在查询参数,URL中总是会有一个尾随的“/”字符。修订版没有这种假设,应该正确处理这两种情况。哇……非常感谢Aroth,你是一个救命恩人!那就是工作完美我真的很想更好地编写javascript,有什么教程可以教我吗?
var a = 'block';
// this if will never be true, because we just set a to "block"
if (a == 'none') {
    a = 'block';
}
// this else will always execute and set a to "block" again.
// something that was already done in the first line.
else {
    a = 'block';
}