javascript - Dynamic underlining of active page - Stack Overflow

admin管理员组

文章数量:1426451

Asked a similar question a while ago and tried to build off of my answer but am still having trouble.

I've got a navigation menu that links to different places within the page. I'd like the active pane's link to be underlined. See the jsFiddle for demonstration. The return false is a necessary part of the code. I have a javascript function guiding the page to the location instead of jumping to it instantly.

Thank you!

/

HTML

<div id="nav">
    <a href="#about" id="nav_about">ABOUT</a><br />
    <a href="#pictures" id="nav_pictures">PICTURES</a><br />
    <a href="#contact" id="nav_contact">CONTACT</a>
</div>

CSS

a, a:active, a:visited {
    color:#1d1d1d;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}

JavaScript

$('#nav a').click(function(){
    $('#nav a').css('text-decoration', 'none', function(){
        $(this).css('text-decoration', 'underline');
    });
    return false;
});

Asked a similar question a while ago and tried to build off of my answer but am still having trouble.

I've got a navigation menu that links to different places within the page. I'd like the active pane's link to be underlined. See the jsFiddle for demonstration. The return false is a necessary part of the code. I have a javascript function guiding the page to the location instead of jumping to it instantly.

Thank you!

http://jsfiddle/danielredwood/aBuZu/3/

HTML

<div id="nav">
    <a href="#about" id="nav_about">ABOUT</a><br />
    <a href="#pictures" id="nav_pictures">PICTURES</a><br />
    <a href="#contact" id="nav_contact">CONTACT</a>
</div>

CSS

a, a:active, a:visited {
    color:#1d1d1d;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}

JavaScript

$('#nav a').click(function(){
    $('#nav a').css('text-decoration', 'none', function(){
        $(this).css('text-decoration', 'underline');
    });
    return false;
});

• javascript
• jquery
• css
• dynamic
• underline

Share Improve this question Follow edited Aug 8, 2011 at 19:07 technopeasant asked Aug 8, 2011 at 18:58 technopeasanttechnopeasant 7,9593333 gold badges9393 silver badges151151 bronze badges 1

• $(this).css('color', 'underline'); ??? i think you mean $(this).css('text-decoration', 'underline'); also, css() accepts either one or two parameters, not three as you wrote – Einacio Commented Aug 8, 2011 at 19:02

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Try this http://jsfiddle/aBuZu/1/

 $('#nav a').click(function(){
    $('#nav a').css("textDecoration", "none"); 
    $(this).css('textDecoration', 'underline');
    return false;
 });

Easier:

$('#nav a').click(function(event) {
    event.preventDefault(); //same as return false
    $('#nav a').removeClass('active');        
    $(this).toggleClass('active');   
});

CSS:

a {
    color:#1d1d1d;
    text-decoration:none;
}
a:hover, a.active {
    text-decoration:underline;
}

$(this).css('color', 'underline');

is kinda nonsense. Perhaps color should be text-decoration: Example

$('#nav a').click(function(e){
    $('#nav a').css('text-decoration', 'none');
    $(this).css('text-decoration', 'underline');
    e.preventDefault();
});

First you need to choose framework jQuery in jsFiddle

Updated JS

$('#nav a').click(function(){
    $('#nav a').css('text-decoration', 'none');
    $(this).css('text-decoration', 'underline');
    return false;
});

本文标签： javascriptDynamic underlining of active pageStack Overflow