Javascript 基于url显示特定的div
我需要在单击按钮时显示一个特定的div,仅当url位于某个成员配置文件上时。如果它不在配置文件页面上,则显示另一个将显示错误消息的div。我已经写了很长时间了,因为我不太擅长javascript。下面的代码有两个问题: 1) 只有第一个url将显示正确的div,而不是or(| |)后面的url? 2) 无论您在哪个页面上,都会显示错误消息的else代码 请帮忙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
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';
}