多个if语句返回取决于URL的css值

该脚本可以工作，但它们似乎是导致第一个和最后一个if语句实现该样式的错误，无论该页面处于何种页面。中间的if语句不显示。多个if语句返回取决于URL的css值

我也尝试了一个休息和每个if语句后返回，但完全刹车脚本，并不显示任何内容。

window.onload = function() 
{ 
var ThisStyle = "background-color: #4C4C4C; color: #fff; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;" 

if (document.URL.indexOf("index.php")) 
{ 
    document.getElementById("home-nav").style.cssText = ThisStyle; 
} 

else if (document.URL.indexOf("about.php")) 
{ 
    document.getElementById("about-nav").style.cssText = ThisStyle; 
} 

else (document.URL.indexOf("products.php")) 
{ 
    document.getElementById("products-nav").style.cssText = ThisStyle; 
} 
}

任何人有任何想法我做错了什么？

来源

2015-03-31 mark-vb-austin

你有一个''如果在'其他失踪（document.URL.indexOf（ “products.php”））' – 2015-03-31 13:15:13

即使与变化问题仍然存在 – 2015-03-31 13:17:07

需要使用类而不是http://jsfiddle.net/arunpjohny/h8z4h9qn/4/ – 2015-03-31 13:17:49

有多种问题在这里，因为我前面提到if失踪在最后声明中，也的indexOf（）将返回-1，如果该项目不在发现这是一个truthy值，所以总是第一个条件将是真正的

一个更合适的解决方案将是使用一类

.active { 
    background-color: #4C4C4C; 
    color: #fff; 
    -webkit-border-top-right-radius: 15px; 
    -webkit-border-bottom-right-radius: 15px; 
    -moz-border-radius-topright: 15px; 
    -moz-border-radius-bottomright: 15px; 
    border-top-right-radius: 15px; 
    border-bottom-right-radius: 15px; 
}

然后

window.onload = function() { 
    var url = document.URL, 
     id; 
    if (url.indexOf("index.php") > -1) { 
     id = 'home-nav'; 
    } else if (url.indexOf("about.php") > -1) { 
     id = 'about-nav'; 
    } else if (url.indexOf("products.php") > -1) { 
     id = 'products-nav'; 
    } 
    if (id) { 
     var el = document.getElementById(id); 
     if (el.classList) { 
      el.classList.add('active') 
     }else{ 
      el.className+= ' active' 
     } 
    } 
}

演示：Fiddle

来源

2015-03-31 13:21:09

我觉得这个越来越接近了，但我仍然有同样的问题，似乎 – 2015-03-31 13:33:17

@ mark-vb-austin可以分享html示例 – 2015-03-31 13:40:12

https://jsfiddle.net/markvbaustin/59z6saes/1 /这里是谷歌驱动器上的网站副本https://drive.google.com/file/d/0B8rJaCz44Qq0NW5TVnZXTnhNcEU/view?usp=sharing – 2015-03-31 14:29:10

你缺少的indexOf的比较，如果你得到-1或0我认为这将是进入的条件，即使你不想，试试这个：

window.onload = function() 
{ 
    var ThisStyle = "background-color: #4C4C4C; color: #fff; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;" 

    if (document.URL.indexOf("index.php") > -1) 
    { 
     document.getElementById("home-nav").style.cssText = ThisStyle; 
    } 

    else if (document.URL.indexOf("about.php") > -1) 
    { 
     document.getElementById("about-nav").style.cssText = ThisStyle; 
    } 

    else 
     (document.URL.indexOf("products.php") > -1) 
    { 
     document.getElementById("products-nav").style.cssText = ThisStyle; 
    } 
}

来源

2015-03-31 13:19:11 taxicala

试过这之前，但要确定我试过了，它仍然导致我悲伤地有同样的问题 – 2015-03-31 13:32:28

的indexOf返回-1，如果未找到。这将是真理。

您需要添加一个支票!= -1

if (document.URL.indexOf("xxxx") != -1) {

来源

2015-03-31 13:19:38 epascarello

这是类似于什么阿伦P Johny提到，或一个不同的想法。 js不是我的强项 – 2015-03-31 13:35:30

多个if语句返回取决于URL的css值

回答

相关问题