如何为当前页面链接应用 CSS 样式答案

【问题标题】：How to apply CSS style for the current page link如何为当前页面链接应用 CSS 样式
【发布时间】：2012-03-18 00:48:23
【问题描述】：

这是我的代码：

如何为当前页面链接应用一个类，以便鼠标光标使用默认值而不是手？

我不想在所有悬停时都使用默认光标。我想将一个类应用于活动列表项，然后在主页上使用默认光标（即“主页”index.html）使用默认光标作为主页。谢谢！

【问题讨论】：

您的网站是否更改页面（使用多个页面）？还是这是那些“单页”网站之一？
某个时候我会写三页。我不想有死链接，所以我对所有菜单项都使用了 index.html。
看看:target 伪选择器。 thinkvitamin.com/design/stay-on-target

标签： javascript jquery html css

【解决方案1】：

Here's a demo

首先，您需要为每个页面“标识正文”，以区分您所在的页面。

//when at home page

<body id="home"> //or services or contact
    <ul id="navigation">
        <li class="home">
            <a> and so on...
        <li class="services">
            <a> and so on...

然后，您需要为“当前”页面添加类。

//if literally spoken, it's "when at 'this' page, style the link with 'this' class"

#home .home,            //style the home link as "current" when body ID is "home"
#services .services,    //style services link as "current" when body ID is "services"
#contact .contact {     //style contact link as "current" when body ID is "contact"
    //styles when current
}

【讨论】：

我猜你们是想了解我。我不想在所有悬停上使用默认光标。我想将一个类应用于活动列表项，然后在主页上使用默认光标（即“主页”index.html）使用默认光标作为主页。谢谢！
对不起约瑟夫，我不知道你想做什么。从当前页面的每个列表项中删除 href 会更容易。
事实上，这解决了我的问题。我创建了一个名为 .displaynone 的类并设置了 display:none。然后我将该类应用于列表项“Home”。效果很好。我会感谢你激励我。谢谢！
添加了一个演示，自己看看

【解决方案2】：

您可以将其添加到悬停状态

cursor: default;

有点像

#list2 a span:hover {
    cursor: default;
}

在大多数情况下，default 会给你箭头，这是我假设你想要的。

更多详情在这里：http://reference.sitepoint.com/css/cursor

【讨论】：

我猜你们是想了解我。我不想在所有悬停上使用默认光标。我想将一个类应用于活动列表项，然后在主页上使用默认光标（即“主页”index.html）使用默认光标作为主页。谢谢！
您在问题中使用的“活动”一词显然含糊不清。我们的误会只是因为你用词不当造成的。
也许这是我的错误术语。既然你了解了我，你对我的帖子有解决方案吗？

【解决方案3】：

您可能希望使用 CSS cursor 属性。 http://www.w3schools.com/cssref/pr_class_cursor.asp

试试：

div#nav ul li a {
cursor:default;
}

【讨论】：

我猜你们是想了解我。我不想在所有悬停上使用默认光标。我想将一个类应用于活动列表项，然后在主页上使用默认光标（即“主页”index.html）使用默认光标作为主页。谢谢！