gpt4 book ai didi

jquery - 当链接处于事件状态时,jQuery 可以替换链接的图像吗?

转载 作者:行者123 更新时间:2023-12-01 07:26:45 24 4
gpt4 key购买 nike

我目前正在尝试实现一些非常简单的事情,至少在我看来是这样,但是由于某种原因这是不可能实现的。但我猜这可以用 jQuery 来完成。但我缺乏技能。

我有一些菜单项,例如:

  • 首页
  • 新闻
  • 有趣
  • 联系方式

所有这些链接都会打开一个新页面。

现在我正在为这些链接使用图像。当链接处于事件状态(而不是悬停)时,我希望在当前图像上显示一个图像。

使用CSS,当所有链接都位于带有 anchor 的同一页面上时(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 和 anchor ,您可以设置事件链接的格式,在本例中显示不同的图像。当没有单击任何内容时,将显示 non-active.png,如果单击其中一个链接(并且处于事件状态),它将显示事件链接的 active.png (我不想要任何悬停效果,只需要事件而不需要-主动)。

当所有内容都在同一页面上时,通常可以使用 anchor 轻松完成此操作,但是由于我的链接指向不同的页面,这显然不起作用。如果我在这种情况下使用 anchor ,则单击的链接将不再处于事件状态,并且将保持不活动状态。

也许这是对我想要实现的目标的更好解释。也许我什至不需要 jQuery,但我认为必须使用它来获得我正在寻找的所需效果...?

再次感谢,很抱歉提出了愚蠢的问题。

最佳答案

如果您能够在每个页面的正文标记上设置 ID/class 属性,您可以使用它来定位当前(事件)页面的菜单链接。

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

参见$_SERVERbasename有关该示例的更多信息。

当每个页面 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;
}

正如您将看到的,菜单链接将根据 body 标记的 ID/类改变外观。

您可以在css-tricks.com阅读更多相关信息。有一篇关于此的很棒的文章。

关于jquery - 当链接处于事件状态时,jQuery 可以替换链接的图像吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9018871/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com