CSS links and jQuery

Question

I am having a bit of trouble with styling by active links, and I am not sure where I am going wrong.

The HTML:

<div id="menu">
    <ul id="navigation">
        <li class="sup">
            <ul>
                <li class="menu"><a href="#home" title="Home" class="home">Home</a></li>
                <li class="menu"><a href="#work" title="Work" class="work">Work</a></li>
                <li class="menu"><a href="#about" title="About" class="about">About</a></li>
                <li class="menu"><a href="#skills" title="Skills" class="skills">Skills</a></li>
                <li class="menu"><a href="#contact" title="Contact" class="contact">Contact</a></li>
            </ul>
        </li>
    </ul>
</div>

The CSS:

#menu {
    width: 431px;
    float: right;
}

#navbar {
    clear:       both;
    width:       959px;
    margin:      0 auto;
    height:      40px;
    line-height: 40px;
}

#navigation ul {
    margin:              0;
    padding:             0;
    list-style:          none;
    background-image:    url(images/navi-bg.png);
    background-position: center top;
    background-repeat:   repeat;
}

#navigation li {
    text-align:  center;
    float:       left;
    margin-left: 20px;
}

#navigation li a {
    outline:         none;
    font-size:       18px;
    color:           #939393;
    text-decoration: none;
}

#navigation li a:hover {
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    -o-border-radius:      4px;
    -ms-border-radius:     4px;
    -khtml-border-radius:  4px;
    border-radius:         4px;
    background-color:      rgba(0, 0, 0, 0.042);
    border:                1px solid rgba(0, 0, 0, 0.15);
    color:                 #2D2D2D;
    margin:                0;
    border-image:          initial;
    padding-left:          7px;
    padding-right:         7px;
    padding-top:           3px;
    padding-bottom:        3px;
}

#navigation li a:active {
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    -o-border-radius:      4px;
    -ms-border-radius:     4px;
    -khtml-border-radius:  4px;
    border-radius:         4px;
    background-color:      rgba(0, 0, 0, 0.042);
    border:                1px solid rgba(0, 0, 0, 0.15);
    margin:                0;
    border-image:          initial;
    padding-left:          7px;
    padding-right:         7px;
    padding-top:           3px;
    padding-bottom:        3px;
    color:                 #939393;
}

The JQUERY:

function loadStuff() {

    $("a").click(function () {
        var link = $(this).attr('href');

        $(".menu a").each(function () {
            $(this).css("color", "#939393");
        });

        if (link == "#home") {
            $("a.home").css("color", "#939393");
        }

        if (link == "#about") {
            $("a.about").css({"background-color":"yellow", "color":"#939393"});
        }

        if (link == "#work") {
            $("a.work").css("color", "#939393");

        }


        if (link == "#skills") {
            $("a.skills").css("color", "#939393");

        }

        if (link == "#contact") {
            $("a.contact").css("color", "#939393");
        }

        if (link == "#contact") {
            $("a.career").css("color", "#3d6b7b");
        }

    });

Basically what I am trying to achieve is have a border on the active link and a yellow background. I have managed to get it working on the 'about' active link, however when I click on a different link the yellow background still shows on the 'about' link and I only want it to show when it's active.

If your Javascript code had indentation, you would notice that you are missing the closing } of your $("a").click(function () { -- EDIT -- Sorry, my bad. You're missing the closing } of loadStuff. — Weetu
– Weetu, Commented Feb 27, 2012 at 11:16
Basically you need two css classes. One is for active link and another is for inactive link. Whenever user clicks on any link just apply the active class to the link that the user has clicked and apply inactive class to the rest of the links. — Deepak Kumar
– Deepak Kumar, Commented Feb 27, 2012 at 11:16

Alex · Accepted Answer · 2012-02-27 11:20:10Z

1

Use removeClass() and addClass() on click.

I've edited you code - http://jsfiddle.net/wqNmT/

Al

answered Feb 27, 2012 at 11:20

Alex

9,0612 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PK333 Over a year ago

Thanks mate, its appreciated.

Community · Accepted Answer · 2017-05-23 12:27:30Z

1

You need to reset the bg_color each time. You are adding a bg_color, that doesn't mean that you are removing it to the rest of the links when you click on $(this). Alex Thomas answer is what I mean.

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Feb 27, 2012 at 11:35

Maroshii

4,0274 gold badges26 silver badges29 bronze badges

Comments

Deepak Kumar · Accepted Answer · 2012-02-27 11:20:19Z

0

Have a look at : http://www.hicksdesign.co.uk/else/cssnav/faq.html

answered Feb 27, 2012 at 11:20

Deepak Kumar

6824 gold badges15 silver badges31 bronze badges

Comments

Mihai Iorga · Accepted Answer · 2012-09-25 12:22:22Z

0

In your CSS you are using #menu that is for an id, you have class="menu" so in your CSS you have to use

.menu {

}

edited Sep 25, 2012 at 12:22

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

answered Sep 5, 2012 at 19:03

RiccardoV

11 bronze badge

Collectives™ on Stack Overflow

CSS links and jQuery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related