當鏈接處於活動狀態時，jQuery可以替換鏈接的圖片嗎？

我目前正在努力實現一些非常簡單的事情，至少在我眼裏，然而由於某種原因，這是不可能實現的。但我猜測它可以用jQuery來完成。但我缺乏技能。當鏈接處於活動狀態時，jQuery可以替換鏈接的圖片嗎？

我有一些菜單項，例如：

首頁
新聞
樂趣
聯繫

所有這些鏈接打開新的一頁。

現在我正在使用這些鏈接的圖像。當鏈接處於活動狀態時（而不是懸停），我需要在當前圖片上顯示圖片。

使用CSS時，當所有鏈接與錨點位於同一頁面上時（a.home-link：active），這可以非常容易地完成。然而，當鏈接到不同的頁面時，這當然不起作用。

這可以用jQuery來完成...？

更新：

有人勸我用：$("#myImage").attr("src", "path/to/newImage.jpg");

所以，我沒有這樣的：

第1步：

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

第2步：

<script type="text/javascript"> 
$("#testlink").attr("src", "active.png"); 
</script>

第3步：

<a class="active" href="testpage.php"><img src="standard.png" alt="standard" width="64" height="64" border="0" /></a>

但沒有工作，因爲它沒有做任何事情.... :(

//更新＃2

我很欣賞你們的答案和努力，但我無法得到這個工作。我不認爲這應該很難實現。

也許我沒有正確解釋所有的東西，所以我會嘗試通過給出一個更好的例子來更好地解釋它。

使用CSS和定位點，您可以格式化處於活動狀態的鏈接，在這種情況下顯示不同的圖像。如果沒有點擊任何東西，則會顯示non-active.png，如果其中一個鏈接被點擊（並激活），它會顯示活動鏈接的active.png（我不想要任何懸浮效果，只有活動和不-活性）。

這可以很容易地通過錨點完成，通常當所有東西都在同一頁面上時，但是由於我的鏈接指向不同的頁面，這顯然不起作用。如果我在這種情況下使用定位點，那麼點擊的鏈接將不再活動，並且將保持不活動狀態。

也許這是我想要實現的更好的解釋。也許我甚至不需要jQuery，但我認爲這必須用於獲得我期待的效果......？

再次感謝，我很抱歉提出愚蠢的問題。

來源

2012-01-26 Joanne

你應該在你的「步驟2」中使用'$（document）.ready（function（）{}）;'並且我看不到任何ID爲「testlink」的元素。 – Stefan

通過「主動」你真的指的是動態僞類'：active'還是你想要更類似於存儲當前選定的選項卡？ – Stefan

Uhmz ...有什麼區別？我只想讓我的鏈接（圖片）在鏈接處於活動狀態時進行更改。例如，我點擊新聞鏈接（並打開新聞頁面），新聞鏈接將激活並顯示活動鏈接圖像。如果有人點擊了首頁鏈接（索引。PHP）將被打開，名爲Home的鏈接將被激活並顯示活動的家庭圖像。 – Joanne

如果you're能夠設置ID/class屬性對你的身體標記你可以用它來針對每個頁面菜單鏈接當前（活動）頁面。

<body id="page-<?= basename($_SERVER['PHP_SELF'], ".php")?>">

有關示例的更多信息請參見第$_SERVER和basename。

當每個頁面body以及每個菜單鏈接都有它自己的唯一ID /類時，您就可以使用CSS爲當前頁面的菜單鏈接進行樣式設置。

我把這個小demo給你;

HTML

<body id="page-home"> 
    <ul id="nav"> 
     <li id="nav-home"><a href="#home.php">Home</a></li> 
     <li id="nav-foto"><a href="#foto.php">Foto</a></li> 
    </ul>  
</body>

CSS

#page-home #nav-home a, 
#page-foto #nav-foto a 
{ 
    font-weight: bold; 
    background: #cea; 
}

正如你會看到菜單鏈接會改變外觀取決於ID /類body標籤。

你可以在css-tricks.com瞭解更多關於此的文章，這篇文章有很好的文章。

來源

2012-01-31 09:42:32 Stefan

謝謝你！我也在做類似的事情，但你的代碼實際上好多了，謝謝你，我會讓這個好用！高度讚賞！ – Joanne

讓我們來看看你的jQuery腳本做：

$("#testlink") // fetch the element with id "testlink" 
.attr("src", "active.png"); // sets its source to "active.png"

現在，這是顯而易見爲什麼這不起作用：您沒有ID爲「TestLink的」的元素。

設置您想要更改來源的圖像以獲得該ID，並且該圖像應該正常工作。

如果我正確地理解了你，你想要鏈接到用戶所在的頁面以某種方式被標記 - 但是最好的方法是使用JavaScript，但是可能不使用JavaScript，而是服務器端語言。這樣，你可以給應該裝飾的鏈接添加一個類（比如說「active」），然後用CSS做魔術。

來源

2012-01-26 13:42:43

哎呀，我犯了一個錯誤，但它仍然無法正常工作。：S '<腳本類型= 「文本/ JavaScript的」 SRC = 「JS/jQuery的1.7.1.min.js」> <腳本類型= 「文本/ JavaScript的」> $（「＃TestLink的「）.attr（」src「，」active.png「）; ' '' 還不行。：S 也不是：'' 呃，我甚至無法正確格式化我的回覆。抱歉。 :( – Joanne

如果一切都在同一個頁面上（因此是錨點），那麼活動就會有效，但是如果鏈接指向不同的頁面，則不起作用。我想我在我的問題中提到了這個問題，如果不是，我很抱歉 – Joanne

那麼，你仍然在嘗試在鏈接上設置「src」屬性，如果有的話，你應該得到包含在ID爲「testlink」的鏈接中的img-tag，如下所示：'$（「＃testlink img」）.attr（「src」，「path/to/file.png」）' –

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
     $("#testlink").attr("src", "active.png"); 
</script> 

<a class="active" href="testpage.php"><img id="testlink" src="standard.png" alt="standard" width="64" height="64" border="0" /></a>

注意添加一個id到img標籤。

或者：

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
     $("#testlink img").attr("src", "active.png"); 
</script> 

<a id="testlink" class="active" href="testpage.php"><img src="standard.png" alt="standard" width="64" height="64" border="0" /></a>

結合上面的代碼：http://api.jquery.com/hover/

來源

2012-01-26 13:48:19 Darthg8r

謝謝我試過這兩個代碼，但沒有任何變化，它保持在同一張圖片上，它是官方的，我很愚蠢：（ – Joanne

）代碼，我給你的信息在這裏：http://api.jquery.com/hover/ – Darthg8r

當鏈接處於活動狀態時，jQuery可以替換鏈接的圖片嗎？

回答

相關問題