当链接处于活动状态时，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可以替换链接的图片吗？

回答

相关问题