使活動頁面鏈接保持穩固的bg顏色

我希望頁面上的活動鏈接具有穩定的bg顏色。我想我需要jQuery來做到這一點。我想這個代碼，但它不工作..使活動頁面鏈接保持穩固的bg顏色

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#navigation").each(function(){ 
    if($(this).attr('href') == document.URL){ 
     $(this).css("background-Color", "#e9fd99"); 
    } 
}); 
}); 
</script>

見我的圖片澄清：

enter image description here

正如你所看到的 - 這取決於你在哪個頁面鏈接將固定的BG顏色保持靜態..

----------------------- UPDATE ----------- --------------

HTML代碼：

<div id="navigation"> 
<div class="sb_pos"> 
<ul id="red" class="treeview-red"> 

<li class="open"> 
    <span class="tree_titles">About</span> 
    <ul> 


     <li><span><a href="?page=about_getting_started">Getting Started</a></span></li> 
     <li><span><a href="?page=about_recruiting_process">Recruiting Process</a></span></li> 
     <li><span><a href="?page=about_responsibility">Responsibility</a></span></li> 
     <li><span><a href="?page=about_opportunity">Opportunity</a></span></li>

來源

2012-07-13 fyz

謝謝大家的建議。我會盡可能地嘗試每一個，並在明天回覆評論。再次感謝支持。 – fyz 2012-07-13 02:40:37

如果你願意，你可以只用css來完成。給每個頁面的身體一個唯一的id，例如about，contact，tags等。然後給每個鏈接一個唯一的id，aboutlink，contactlink，tagslink等。

然後在你的css中，寫出樣式：

body#about a#aboutlink, 
body#contact a#contactlink, 
body#tags a#tagslink { 
    background-color: #e9fd99; 
}

來源

2012-07-17 05:55:00

你也可以使用類：p – 2012-07-17 06:00:39

我想你的意思是這個

  $("#navigation").each(function(){

，而不是這個

 $("navigation").each(function(){

，如果你是ID，使用#navigation選擇，如果類名是導航用的.navigation

試試這個

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".newclass > li").each(function(){ 
       if($(this).attr('href') == document.URL){ 
        $(this).css("background-Color", "#e9fd99"); 
       } 
      }); 
     }); 
    </script>

添加此

 <ul class="newclass"> 
    <li><span><a href="?page=about_getting_started">Getting Started</a></span></li> 
    <li><span><a href="?page=about_recruiting_process">Recruiting Process</a></span> </li> 
    <li><span><a href="?page=about_responsibility">Responsibility</a></span></li> 
    <li><span><a href="?page=about_opportunity">Opportunity</a></span></li>

它必須選擇父的直接孩子。

來源

2012-07-13 01:29:11

是的，我確實..好趕上，但它仍然不起作用... – fyz 2012-07-13 01:30:21

每個鏈接都有導航的ID？或者是父母？ – 2012-07-13 01:31:01

這就是'父'，它是一個'ID' – fyz 2012-07-13 01:31:31

試試這個，取消的console.log並檢查是否href是等於你需要

<script type="text/javascript" charset="utf-8"> 
    jQuery(document).ready(function($){ 
     $("#navigation").each(function(){ 
      //console.log($(this).attr('href')); 
      //console.log(window.location.search); 
      if($(this).attr('href') == window.location.search){ 
       $(this).css("background-Color", "#e9fd99"); 
      } 
     }); 
    }); 
</script>

來源

2012-07-13 02:00:12 GTSouza

有一個與你的JavaScript的一些問題。首先，jQuery「each」函數不會遍歷選定元素的子元素，它會遍歷選定元素的所有實例。有關此功能的一些示例，請參閱http://api.jquery.com/each/。因此，而不是

$("#navigation").each(function(){ 
    ... 
});

如果要遍歷「禮」的元素，你應該使用

$("#navigation li").each(function(){ 
    ... 
});

，或者選擇li元素一些更具體的選擇（也有可能是$(".open li")基礎上，您提供的HTML）。請注意，您不能使用「>」選擇器，因爲該選擇器指定了直接子對象，並且li不是div的直接子對象。

其次，一旦你選擇li，你不能引用(this).attr('href')因爲this指li，它不具有href屬性。您需要在選定的li下選擇a元素與$("a", this)或$(this).find("a")。

最後，document.URL返回當前文檔，HTTP的整個URL：//和所有的，但你比較它的鏈接，這僅僅是相對路徑?page=about_getting_started的href財產。即使您正在查看正確的鏈接，這也永遠不會相同。您將需要使用window.location.pathname，因爲這會返回當前的相對路徑。

來源

2012-07-13 02:05:17 Edward

這是一個非常簡單的解決辦法：你可以使用PHP從URL抓取你希望的值，並在jQuery代碼像插入抓起值：

$('.#').addClass('active');

其中「＃」是從URL中抓取的值。例如：

<?php 

echo '<script type="text/javascript"> 
$(document).ready(function(){'; 
if(intval($_GET['page']) > 0) { 
    $from_url = intval($_GET['page']); 
    } else { 
     if(isset($_GET['page'])) { 
     $from_url = $_GET['page']; 
     } else { 
     $from_url = 'index'; 
     } 
    } 
echo ' 
    $(\'' . $from_url . '\').addClass(\'active\'); 
    }); 
</script>'; 

?>

也解釋here。

來源

2012-08-02 02:34:59

使活動頁面鏈接保持穩固的bg顏色

回答

相關問題