0

我只是想创建一个简单的菜单。因此，当您单击一个链接时，它会将您定向到另一个页面，并通过更改颜色向您显示您选择了该链接。

我遇到的问题是当我单击列表中的链接时，页面加载并且由于某种原因列表元素都进入了该a:visited字段。将它们设置为红色。我有JSFIDDLE Here。我知道它很简单，但它让我很紧张。

CSS 代码：

ul.nav_style{list-style: none;}

ul.nav_style li {padding-left: 1em; text-indent: -.7em;}

ul.nav_style li:before {
    content: "•  ";
    color: #C0C0C0; /* or whatever color you prefer */
}

ul.nav_style li a:link { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:visited { color: #FF0000; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}​

HTML 代码：

<ul class="nav_style">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

提前致谢。

克里斯

4

4 回答 4

1

解释很简单：所有链接都有相同的href。假设您将更改 href，这在您的最终站点上不会是问题。:)

看我的小提琴。我所做的就是更改hrefs。它现在是否按您的预期工作？http://jsfiddle.net/TheNix/sR3Ub/3/

编辑：
现在，如果您只是希望确保链接看起来相同，无论它是否被访问过，您所要做的就是对:linkand:visited状态应用相同的样式，如下所示：

ul.nav_style li a:link,
ul.nav_style li a:visited { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}

现在链接在空闲时应该是灰色的（即使它被访问过），当你将鼠标悬停在它上面时应该是深灰色，当你点击它时应该是金色的。见小提琴：http: //jsfiddle.net/TheNix/sR3Ub/5/

EDIT v2
看起来你对链接的状态有点困惑，所以这里是低调：

:link是标准的空闲链接（也可以简单地定位为a）
:hover是用光标悬停在元素上的行为。
:visited应用于已经访问过的链接。
:active是链接在用户界面中处于活动状态时的状态 - 例如，当您将鼠标悬停在链接上并按下鼠标左键 (onmousedown) 时，或者使用TAB突出显示链接时。当您释放鼠标按钮 (onmouseup) 或 tab out 时，它将恢复到之前的状态。

:active因此与确定它是否是活动页面无关，它仅在您按住鼠标按钮时适用。

不幸的是，您尝试做的事情仅靠 CSS 是不可能的。这是一个简单的例子，说明如何使用 jQuery 来实现。http://jsfiddle.net/TheNix/sR3Ub/6/

于 2012-11-11T19:17:04.200 回答
0

这可能是浏览器安全的原因，http ://dbaron.org/mozilla/visited-privacy Mozilla http://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-泄漏/也告知了这一点。大多数最新的浏览器都采取了这种措施来保护用户。

于 2012-11-11T19:16:48.687 回答
0

您必须将目标网址放在 href 或 data-href 等中，点击链接并加载新页面后，您必须检查窗口位置并将链接颜色设置为红色：

$(function(){
   var url = window.location.href;
   $("ul.nav_style li").each(function(i,e){
      var $this = $(e);
      if ($this.attr("href") == url){
         $this.css("color","red");
      }
   };
});
于 2012-11-11T19:24:25.973 回答
0

问题解决了，我决定只使用 PHP 来生成我的列表，使用数组和 if 语句为当前页面提供其 css 类。

PHP代码：

if($title == "Enter"){

              $enterArrayPages = array("competition.php","full_detail.php", "judges.php", "get_involved.php", "employers.php");
              $enterArrayText = array("The Competition","Full Detail","The Judges","Get Involved", "Employers");

              echo '<ul class="nav_style">';
              for($i=0; $i<sizeof($enterArrayPages); $i++){

                if($proper_title == $enterArrayText[$i]){
                  echo '<li><a class="linkChange" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
                }
                else{
                  echo '<li><a class="menu_links" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
                }
              }
              echo '</ul>';
            }

如您所见，代码循环遍历存储在数组中的每个页面，如果页面的标题等于数组中的标题，我更改其类，使链接的颜色与其他链接的颜色不同。

这是CSS：

a.menu_links:link { color: #58595B; text-decoration: none;}
a.menu_links:visited  { color: #58595B; text-decoration: none; }
a.menu_links:active { color: #E6BD13; text-decoration: none; }
a.menu_links:hover  { color: #E6BD13; text-decoration: none; }

.linkChange {
   color: #E6BD13;
   text-decoration: none;
}

这真的很简单，我只需要通过 PHP 来思考逻辑。我认为用纯 css 实现它就足够了，但随着时间的推移，我求助于 PHP。

这是代码输出的图像：

代码输出，您可以看到我的代码如何获取当前页面并更改链接的颜色，在这种情况下，Mentor 和 What is Service 被突出显示。

感谢大家的评论！非常感激！

于 2012-11-11T20:51:29.423 回答