Question

该脚本可以工作，但它们似乎是一个错误，导致第一个和最后一个if语句实现该样式，无论它在哪个页面上。中间if语句不显示。

我还尝试了一个中断并在每个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;
}
}

任何人都知道我做错了什么？

Answer 1

你错过了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;
    }
}

Answer 2

indexOf如果找不到则返回-1。那将是真实的。

您需要为!= -1

添加支票

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

Answer 3

这里有很多问题，正如我前面提到的if在最后一个语句中丢失了，如果找不到项目，则indexOf（）将返回-1这是一个真值，所以总是你的第一个条件将是真的

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

.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

多个if语句根据URL返回css值

3 个答案: