爲什麼導航菜單上的當前頁面不會更改？

我正在研究一個tumblr主題，我之前沒有提供代碼問過，所以我把這些代碼放在一起，如果它能幫助你的話。爲什麼導航菜單上的當前頁面不會更改？

我有一個if語句，如果window.current.href ==「家庭的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', 
     }); 
});

來源

2015-01-02 Richard Lund Winther

你的代碼有語法錯誤 – Leo

你有很多語法錯誤。尤其是，傳遞給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', 
    }); 
}

它不是在小提琴爲你工作，也因爲小提琴使用一個框架來顯示結果。你需要使用框架URL來測試。

看到這個：http://jsfiddle.net/abhitalks/c3vgy00n/4/

點擊「運行」看到「家」的CSS效果。

。

來源

2015-01-02 13:53:59 Abhitalks

首先，你的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>（這是我的假設，如果我錯了，請糾正我）。

來源

2015-01-02 13:54:10 Leo

我明白了！我怎樣才能檢查Tumblr上的結果部分呢？我修正了語法錯誤，並添加了http://whatchoodo.tumblr.com/而不是jsfiddle鏈接，但它仍然無法工作。如果你想要看到的話，那就是主頁的鏈接。噢，我將身份證從跨度改爲周圍的鏈接，再說一遍，你說他們是我想要的樣式。謝謝，理查德。 –

@RichardLundWinther URL是''http://whatchoodo.tumblr.com/「'，而不是''whatchoodo.tumblr.com/」'。協議（http/https）是URL的一部分。 – Leo

@RichardLundWinther你可以運行'alert（window.location.href）'查看每個頁面的正確URL。 – Leo

爲什麼導航菜單上的當前頁面不會更改？

回答

相關問題