修改

Question

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

有些人会说这是因为你在CSS中使用：active pseudoclass但是我根本就没有使用它。但是，它的表现完全如此。

这是一个有效的例子。 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伪类一样，但事实并非如此。当我点击链接到我的博客时，它实际上将链接添加到链接中，并在新选项卡中打开页面。

Answer 1

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

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

要解决此问题，您有两个选择：

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

对于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添加到样式表中，在某些类中（我将其命名为＃34;你在哪里＆＃34;），然后打开所有页面并进行更改。

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

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

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

链接格式不正确导致CSS出现问题

1 个答案:

修改