0

我试图在单击链接时将链接的背景更改为颜色。我见过很多使用 jquery 的例子。它看起来很干净，很简单。我已经实现了它，我基本上复制了堆栈中某人的礼貌，将一个漂亮的简单小提琴放在一起。我的问题是当链接打开时，您可以看到白色背景，然后它就消失了。

你们中的一些人会说这是因为您在 CSS 中使用 :active 伪类，但是我根本没有使用它。但是，它的行为正是如此。

这是一个有效的例子。http://jsfiddle.net/stewbydoo/9R5CG/15/

我的问题和问题是我在小提琴中复制了这个导航并将其放入我的代码中并将href更改为实际链接到另一个页面。我的文件结构很简单，有 index.html、about.html、contact.html 和指向我的博客的链接。

<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>

当我单击简单 .html 页面的链接时，链接的行为就像它使用 :active 伪类一样，但事实并非如此。当我单击指向我的博客的链接时，它实际上会像预期的那样将背景添加到链接中，并在新选项卡中打开页面。

4

1 回答 1

1

当您单击第一个链接时，页面会重新加载，这就是重置 javascript 的原因（因此没有背景样式）。

将您的 href 值更改为#，它将起作用（但您不会再更改页面）。

要修复它，您有 2 个选项：

  1. 禁用链接上的页面重新加载（e.preventdefault），并在 ajax 中加载页面内容（复杂）。
  2. 管理此服务器端（更容易但需要动态语言）。

对于 2，我假设您使用的是 php。代码大致如下所示：

<?php
   $pageActiveIndex = false
   if ($_SERVER["REQUEST_URI"] == "index.html") {
      $pageActiveIndex = true;
   }
   //same thing for the other links
?>


<li><a <?php if($pageActiveIndex) echo 'class="activeTab"' ?> href="index.html">Home</a></li>
<li><a <?php if($pageActiveAbout) echo 'class="activeTab"' ?> href="about.html">About</a></li>
<li><a <?php if($pageActiveContact) echo 'class="activeTab"' ?> href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>

当然，target=_blank在任何地方添加也可以......但我怀疑这是你想要的效果。

编辑

由于您的网站似乎是静态的，因此您可以做一些超级简单的事情来产生效果。

将自定义 css 添加到您的样式表中，在某个类中（我将其命名为“youarehere”），然后打开所有页面并更改它们。

在 index.html 中

<li><a class="youarehere" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>

在 about.html

<li><a href="index.html">Home</a></li>
<li><a class="youarehere" href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>

在contact.html

<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a class="youarehere" href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>
于 2012-11-13T18:38:20.530 回答