多個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值

回答

相關問題