在我的网站中，我有三个页面：主页、关于和联系方式。我希望当前页面的链接能够提供一些视觉指示，表明单击相应链接将毫无意义，因为用户已经在该页面上。这个任务是由 CSS 还是 jQuery 更好地处理，在这两种情况下，最优雅的解决方案是什么，它将自动应用于将来可能添加的任何页面？
这是我的 HTML diesbezueglich：
<nav>
<ul id="menu">
<li><a href="~/">Home</a></li>
<li><a href="~/About">About</a></li>
<li><a href="~/Contact">Contact</a></li>
</ul>
</nav>
更新
我想知道为什么这不起作用；我在 Site.css 中添加了这个：
nav ul li a.current {
color: blue;
}
相关的HTML是：
<nav>
<ul id="menu">
<li><a href="~/">Home</a></li>
<li><a href="~/About">About</a></li>
<li><a href="~/Contact">Contact</a></li>
</ul>
</nav>
然而，链接保持不变（正如 Led Zeppelin 预测的那样）。
更新 2
我试过这个来测试这里提出的各种想法的一种混合：
在 Site.css 中：
.current {
color: blue;
}
在 _SiteLayout.cshtml 中：
<ul id="menu">
<li id="home" name="home"><a href="~/">Home</a></li>
<li><a href="~/About">About</a></li>
<li><a href="~/Contact">Contact</a></li>
</ul>
在 Default.cshtml 中：
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$(".fancybox").fancybox();
$("home").addClass('current');
});
</script>
...但是不行；“主页”链接一如既往地亲切（没有双关语）。
我还尝试为所有链接提供“位置”的 id，并将其添加到 Default.cshtml 的“就绪”函数中：
if ($(#location).attr('href').indexOf('home') != -1) $('home').addClass('currentPage');
else if ($(#location).attr('href').indexOf('about') != -1) $('about').addClass('currentPage');
else if ($(#location).attr('href').indexOf('contact') != -1) $('contact').addClass('currentPage');
（其中“currentPage”是将颜色设置为蓝色的 css 类，每个导航链接的 id 为“location”）；我认为我还必须为每个 if/else 块中索引为 -1 的两个链接添加一个“removeClass”。
我的啤酒在纳秒内变得越来越咸。
更新 3
我试过这个：
为 _SiteLayout.cshtml 中的元素添加了 ID：
<nav>
<ul id="menu">
<li id="home"><a href="~/">Home</a></li>
<li id="about"><a href="~/About">About</a></li>
<li id="contact"><a href="~/Contact">Contact</a></li>
</ul>
</nav>
并将其添加到 Site.css：
#home {color: orange;}
#home.current {color: blue;}
#about {color: orange;}
#about.current {color: blue;}
#contact {color: orange;}
#contact.current {color: blue;}
...但它什么也没做 - 无论我在哪里导航，所有链接仍然是灰色的。
更新 4
也试过这个无济于事：
if ($('#home').attr('href').indexOf('Home') != -1) $('#home').addClass('currentPage');
更新 5
我想知道是否有办法使用 _PageStart.cshtml 来处理这个问题？IOW，我可以这样做：
@{
Layout = "~/_Layout.cshtml";
//pseudocode follows
var currentPage = CurrentPage.Id;
}
//然后是一些jQuery（也是伪代码）：
if @currentPage == Default {
#home.display = none;
else if @currentPage == About {
#about.display = none;
else if @currentPage == Contact {
#contact.display = none;
} // perhaps set them all visible from the git-go
更新 6
“用于 ASP.NET 开发人员的 jQuery”启发的另一种可能性是“就绪”函数中的以下内容（伪代码；如果这可行，我欢迎我需要充实它的特定 jQuery）：
// first set all of the nav ul li to their default color, right? (not shown)
// now, color the current one chartreuse:
$("nav ul li").each(function() {
switch ($(this.name)) {
case 'home':
$(#home).css("color", "chartreuse");
break;
case 'about':
$(#about).css("color", "chartreuse");
break;
case 'contact':
$(#contact).css("color", "chartreuse");
break;
}
});
更新 7
好吧，我敢肯定这不是优雅的想法，但我确实找到了一种方法来通过为每个 li 使用单击事件来完成它。欢迎来到这里的 jsfiddle 优雅化：http: //jsfiddle.net/vV4h5/1/
至于上面 jsfiddle 的优雅化，必须有一种方法可以代替：
jQuery(function () {
$("nav ul li").css("color", "black");
var currentLI = theOneClicked; //??? how to get this???
$(currentLI).css("color", "blue");
});
更新 8
它适用于 jsfiddle，但不适用于我的项目；在 _SiteLayout.cshtml 中有这个：
<nav>
<ul id="menu">
<li id="home"><a href="~/">Home</a></li>
<li id="about"><a href="~/About">About</a></li>
<li id="contact"><a href="~/Contact">Contact</a></li>
</ul>
</nav>
. . .
jQuery(function () {
$("#home").click(function (event) {
$("#home").css("color", "blue");
$("#about").css("color", "black");
$("#contact").css("color", "black");
});
});
jQuery(function () {
$("#about").click(function (event) {
$("#home").css("color", "black");
$("#about").css("color", "blue");
$("#contact").css("color", "black");
});
});
jQuery(function () {
$("#contact").click(function (event) {
$("#home").css("color", "black");
$("#about").css("color", "black");
$("#contact").css("color", "blue");
});
});
...不起作用。也不会只将第一个函数移动到 Default.cshtml，因此它看起来像这样：
$(document).ready(function () {
$("#tabs").tabs();
$(".fancybox").fancybox();
$("#home").click(function (event) {
$("#home").css("color", "blue");
$("#about").css("color", "black");
$("#contact").css("color", "black");
});
});