Question

我正在研究一个tumblr主题，我之前没有代码就问了一下，所以如果它能帮到你，我会把它放在一起。

我有一个if语句，如果window.current.href ==“home的html”（在这种情况下我将jsfiddle html用于测试目的）然后.css来改变样式，因为我想要它成为。但它似乎没有用，有什么想法吗？

HTML：

<div id="headerMenu">
    <ul class="nav">
        <li>
            <a href="http://whatchoodo.tumblr.com/">
                <span id="home">Home</span>
            </a>
        </li>
        <li>
            <a href="http://whatchoodo.tumblr.com/Dirty">
                <span class="dirty">Dirty Jokes</span>
            </a>
        </li>
        <li>
            <a href="http://whatchoodo.tumblr.com/Sport">
                <span id="sport">Sport</span>
            </a>
        </li>
        <li>
            <a href="http://whatchoodo.tumblr.com/Memes">
                <span id="memes">Memes</span>
            </a>
        </li>
        <li>
            <a href="http://whatchoodo.tumblr.com/Personal">
                <span id="personal">Personal Stuff</span>
            </a>
        </li>
    </ul>
</div>

JavaScript的：

$(document).ready(function () { 
    if (window.location.href == "http://jsfiddle.net/RichardWinter/c3vgy00n/2/") { 
        $("#home").css({
            border-bottom+color: #6DC176,
            border-bottom-style: 'solid', 
            border-bottom-width: 3px,
            color: #6DC176, 
            font-weight: 'bold',
        }); 
});

Answer 1

你有很多语法错误。特别是，传递给jQuery .css的对象参数缺少其属性和值的引号。此外，您if缺少一个结束括号。

这应该是这样的：

if (window.location.href == "http://fiddle.jshell.net/_display/") {
    $("#home").css({
        'border-bottom-color': '#6DC176',
            'border-bottom-style': 'solid',
            'border-bottom-width': '3px',
            'color': '#6DC176',
            'font-weight': 'bold',
    });
}

它在小提琴中不适合你，也因为小提琴使用框架来显示结果。您需要使用框架网址进行测试。

请参阅：http://jsfiddle.net/abhitalks/c3vgy00n/4/

点击＆＃34;运行＆＃34;在＆＃34; home＆＃34;。

上看到CSS效果

Answer 2

首先，你的JS有语法错误，修复如下：

$(document).ready(function () {
    if (window.location.href == "http://jsfiddle.net/RichardWinter/c3vgy00n/2/") {
        $("#home").css({
            'border-bottom-color': '#6DC176',
            'border-bottom-style': 'solid', 
            'border-bottom-width': '3px',
            'color': '#6DC176', 
            'font-weight': 'bold'
        });
    } 
});

其次，URL不匹配。 jsfiddle的结果部分实际上是iframe（http://fiddle.jshell.net/RichardWinter/c3vgy00n/2/show/）。

第三，我猜你真正要修改的是锚点<a>）样式，而不是它的孩子<span>（这是我的假设，如果我错了，请纠正我）。

为什么导航菜单上的当前页面不会保持更改？

2 个答案: