【发布时间】：2013-04-29 04:46:30
【问题描述】：
在我的网站中，我有三个页面：主页、关于和联系。我希望当前页面的链接能够提供一些视觉指示，表明单击相应链接将毫无意义，因为用户已经在该页面上。这个任务是由 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");
});
});
【问题讨论】：
-
您可能需要将
current之类的类添加到链接中，然后使用该类设置链接的样式 -
可以分享导航html吗
-
我相信您正在尝试做的事情称为“您在这里导航。”如果你用谷歌搜索这个词，你会得到很多结果。
-
如果您不使用服务器语言，最好使用 jQuery，创建一个 css 类 currentPage 左右。将 id 添加到所有链接并在 jQuery 就绪函数中使用它 if($(location).attr('href').indexOf('home')!=-1) $('home').addClass('currentPage' );您可以在 if else 条件中添加所有 id
-
您的更新 3 非常好，除了您需要使用
#作为 ID 选择器而不是.您调用的是类，而不是 id。
标签： javascript jquery css html nav