如何在一个网页的导航中实现活动状态 [英] how to achieve active state in a navigation for a one page website

问题描述

我在一个单页网站上工作。在本网站中，我想让活动部分或页面在导航栏中加下划线。目前我有点击链接显示下划线。但是，当我点击转到另一个活动的页面时，它保持下划线。

I am working on a one page website. In this website, I would like to have the active section or "page" to be underlined in the navigation bar. Currently I have the link to display with underline after clicking on it. However, it stays underlined when I click to go to another active "page".

以下是在HTML中设置导航的方法：

Here is how the navigation is set up in the HTML:

<div id="navbar" class="center">
    <ul>
       <li><a href="#home">home</a></li>
       <li><a href="#about">about</a></li>
       <li><a href="#music">music</a></li>
       <li><a href="#videos">videos</a></li>
       <li><a href="#connect">connect</a></li>
       <li><a href="#contact">contact</a></li>
    </ul>
</div>

我把我的代码写在这个jsFiddle中： http://jsfiddle.net/GdePr/ 。任何人都能想到一些解决方案？

I have written the rest of my code out in this jsFiddle: http://jsfiddle.net/GdePr/. Can anyone think of some solutions?

推荐答案

你只是忘了添加jquery并设置代码运行dom准备好： http://jsfiddle.net/GdePr/8/

you just forgot to add jquery and set the code to run on dom ready: http://jsfiddle.net/GdePr/8/

$(function(){
    $('#navbar a').click(function () {
        $('#navbar a').css('text-decoration', 'none');//don't forget to reset other inactive links
     $(this).css('text-decoration', 'underline');
     });
 });

但我建议的是添加类 active 到所选的链接，并在它的CSS文件中提供 underline 属性，以便以后您的脚本可以识别当前的活动链接： http://jsfiddle.net/GdePr/14/

But what i would suggest is to add the class active to the selected link and give it underline property in your CSS file so you can later in your script recognize current active link:http://jsfiddle.net/GdePr/14/

$(function(){
    $('#navbar a').click(function () {
        $('#navbar a').removeClass('active');
        $(this).addClass('active');
     });
 });

CSS：

 a.active{
       text-decoration: underline !important; 
    }

这篇关于如何在一个网页的导航中实现活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！