导航栏当前状态

-1

大家好我为我的网站做了导航。当我转到其他页面时，我只想更改链接的颜色。例如，我点击“关于”，然后我将转到关于我喜欢关于页面的链接，当我处于关于页面时，链接将变成红色。导航栏当前状态

我该怎么做？谢谢！

这里的代码

HTML

<nav> 
    <ul> 
     <li><a href="index.htm">Home</a></li> 
     <li><a href="about.htm">About</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Creatives For Less</a></li> 
     <li><a href="#">Blogs</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav>

CSS：

nav { 
    float: right; 
    margin-top: 13px; 
    margin-right: 40px; 
} 

nav ul { 
    font-family: josefin; 
    list-style-type: none; 
    font-size: 11pt; 
    text-transform: uppercase; 
} 

nav li { 
    display: inline; 
    padding-left: 15px; 

} 

nav li a{ 
    text-decoration: none; 
    color: #0ff; 
} 

nav li a:hover, a:active { 
    color: #fff; 
}

来源

2013-07-17 user2593297

部屋指派他们，欢迎SO！如果你问一个问题，如果你包括你已经尝试过的东西，你正在使用的约束条件等等，这会有所帮助。请注意，你可以编辑你的问题来添加这些细节。 – Jeroen

你的问题有点模棱两可。您是否说您想要“关于”为红色，因为您目前正在查看“关于”页面，或者因为您在某个时间点查看了“关于”页面。换句话说，如果你（从关于页面）点击链接到“索引”页面，在加载的新页面上，“家”是红色的，还是“关于”，或两者？ –

你可以添加一些CSS类与JavaScript或一些服务器端语言。

如果您将使用JavaScript，您应该找到指示您用户在页面上的内容（例如某些带有信息的div）。然后，如果您使用JQuery，请添加此类：

$('#mylink').addClass('active');

来源

2013-07-17 22:10:51

我不会建议这样做;使用JQuery来处理这些微不足道的事情应该可以像一般的做法一样避免。 – SharkofMirkwood

只要有一个active类，如果你是一个页面上，设置<li>有该类。

例如：

<li class="active"><a href="#">Services</a></li>

而且在你的CSS样式active类：

nav li.active a{ 
    color: red; 
}

如果你问你怎么知道你是哪个网页上，虽然和希望动态执行此操作，您需要使用PHP，其他服务器端语言或JavaScript。

来源

2013-07-17 22:09:08 SharkofMirkwood

在您的CSS中使用a：visited。

a：visited { background-color：yellow; }

你应该考虑过设置它们类，然后通过CSS

来源

2013-07-17 22:10:51 null

导航栏当前状态

回答

相关问题