1

假设我有一个带有导航栏的基本网站，其中包含一些链接。当我在一个页面上（比如使用条款）时，我希望导航栏中的“使用条款”链接突出显示。当我切换到不同的页面时，我希望突出显示该页面的链接（即我切换到隐私页面，然后在导航栏中突出显示“隐私”）。

有谁知道用 HTML/CSS/JS 做到这一点的简单方法？

4

6 回答 6

4

一种不使用 javascript 或 php 等的简单方法是在每个页面上的 body 标记中添加不同的类。

<body class="nav-1-on">

然后在你的css文件中：

body.nav-1-on a.nav-1, body.nav-2-on a.nav-2  { color:red )

因此，无论您拥有多少导航项目，您都需要 XXX 类，并且如图所示，您也可以在每个导航项目上放置一个类。

有道理？

于 2012-07-30T22:11:54.157 回答
3

更新（大脑衰退，选择器错误）。对于 CSS3 浏览器，您可以轻松地定位页面名称本身：

a[href*=pageNameImOn.htm] {color: red;}

此处将*=匹配其中包含的所有 href 路径pageNameImOn.htm，这将匹配：

<a href="/my/path/to/file/pageNameImOn.htm">
<a href="/pageNameImOn.htm">
<a href="/pageNameImOn.htm#interalJumpLink">
于 2012-07-30T22:14:59.907 回答
1

对于想要为不同颜色的链接，可以手动设置样式

<a style="color:red">My link is red</a>

可能更好的方法是定义一个颜色为红色的类

<style> .visited { color:red } </style>

然后是实际的链接

<a class="visited">My red link</a>

于 2012-07-30T22:09:37.053 回答
1

这个解决方案使用jQuery，jQuery 只是一个为 javascript 编译的代码库，提供易于使用的代码片段和功能。

这绝对是实现您所追求的最简单的方法，尽管它是“客户端”，因此该类将由用户机器添加，而不是由服务器添加然后发送给用户。但是对于较小的站点，它应该就足够了。

发生了什么：此代码找到您的导航，在这里它正在寻找liof .nav，因此将 (' .nav li') 替换为您调用的菜单类，因此可能：('.mymenu li')。然后它会查看菜单链接是否与当前页面匹配，如果匹配，则向 li 添加一个类。所以还需要创建一个类.active，比如：.active{background-color:blue;}

希望这可以帮助！

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
  jQuery('.nav li').each(function() {
  var href = jQuery(this).find('a').attr('href');
  if (href === window.location.pathname) {
  jQuery(this).addClass('active');
}
});
});  
</script>
于 2012-07-30T22:16:22.050 回答
1

就是图个好玩儿。没有任何后端代码或 Javascript 的唯一解决方案Single page怎么样：CSS3

<ul>
     <li><a id="home" href="#home">Home</a></li>
     <li><a id="terms" href="#terms">Terms of use</a></li>
</ul>

CSS

 li a { color: black; }     
 #home:target { color: red; }     
 #terms:target { color: red; }

CSS 中的:target选择器将匹配与当前井号标签匹配的 ID 选择器。这里有更多信息：http ://reference.sitepoint.com/css/pseudoclass-target

对 Firefox、Safari、Opera 和 Chrome 的支持非常好。

对 IE9 和 IE10 的不完全支持：

IE 不会对 Back 和 Forward 按钮做出反应：该元素根本不会应用或删除伪类。http://www.quirksmode.org/css/contents.html

于 2012-07-30T22:18:30.053 回答
1

在你的 body 上设置一个不同的 id 来识别页面。

<body id="terms-of-use">

一个示例导航：

<nav>
 <a class="home" href="#">Home</a>
 <a class="terms-of-use" href="#">Terms</a>
</nav>

然后在你的CSS中：

nav a {
  // default style
  background: blue;
}

#terms-of-use a.terms-of-use {
 // if the id of body is terms-of-use then the link with the class .terms-of-use...
 background: red;
}
于 2012-07-31T01:39:26.793 回答