Question

我目前正在努力实现一些非常简单的事情，至少在我看来，然而由于某种原因，它是不可能实现的。但我猜它可以用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（我不想要任何悬停效果，只有活动而不是-active）。

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

也许这是对我想要达到的目标的更好解释。也许我甚至不需要jQuery，但我认为这必须用来获得我想要的预期效果......？

再次感谢，我很抱歉提出愚蠢的问题。

Answer 1

如果您能够在每个页面的body标签上设置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;
}

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

您可以在css-tricks.com上阅读更多有关此内容的文章。

Answer 2

让我们来看看你的jQuery脚本在做什么：

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

现在，很明显为什么这不起作用：你没有ID为“testlink”的元素。

设置您想要更改源的图像以获得该ID，它应该只是花花公子。

如果我理解正确，您希望以某种方式标记用户所在页面的链接 - 但最好的方法是使用JavaScript，而不是使用服务器端语言。这样，你可以在应该装饰的链接中添加一个类（比如说，“active”），并用CSS做一些魔术。

Answer 3

 <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>

注意在img标签中添加了一个id。

或者：

 <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/

结合起来

当链接处于活动状态时，jQuery可以替换链接的图像吗？

3 个答案: