Jquery Toggle Link Color

Question

I am using Cufon and I have my navigation and all of my content is on one page and it is scrolling via anchor tag to that section of the page, yet the navigation stays visible I want when you click a link that link will light up:

Here is what I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Veneer_400.font.js" type="text/javascript"></script>

<script type="text/javascript">
    Cufon.replace('h1 a', { 
        hover: true
    });
</script>

<style type="text/css">
h1 a.selected {
    color: red;
}
</style>
</head>

<body>
<div class="home-link"><h1><a class="selected" href="#home">Home</a></h1></div>
<div class="hiw-link"><h1><a class="" href="#howitworks">How It Works</a></h1></div>
<div class="faq-link"><h1><a class="" href="#faq">Faq</a></h1></div>
<div class="prize-link"><h1><a class="" href="#prizes">Prizes</a></h1></div>
<div class="media-link"><h1><a class="" href="#media">Media</a></h1></div>
<div class="rules-link"><h1><a class="" href="#rules">Rules</a></h1></div>
<script type="text/javascript">
$('#home-link','#hiw-link','#faq-link','#prize-link','#media-link','#rules-link').toggleClass(selected, addOrRemove);
</script>
</body>
</html>

So basically as you see I am just trying to add the class of selected to the anchor tag and remove it from everything else so only that link is red. Help is greatly appreciated.

note that you are using ID selectors for selecting elements by their class names. — Ram, Jul 16 '12 at 23:00

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

jsBin demo

$('div[class$=link] h1 a').click(function(e){
    e.preventDefault();
    $('div[class$=link] h1 a').removeClass('selected');
    $(this).addClass('selected');    
    Cufon.refresh(); // Will refresh all `Cufon` text
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 16 '12 at 22:57

Roko C. Buljan

196,159
39
305
313

So close! It works but the color doesn't go away on the previously clicked items unless I rollover them?? – Robert Taylor Jul 16 '12 at 23:17
@RobertTaylor Lol Robert! Now I got it! you're actually navigating to a new page! and how do you expect to pass some values cross page unless you read the URL with JS ? :) – Roko C. Buljan Jul 16 '12 at 23:19
@RokoC.Buljan, you are missing something. He is using `Cufon` and needs to call `Cufon.refresh();`, take a look at [this answer of mine](http://stackoverflow.com/questions/9906679/how-reload-refresh-styles-of-an-element-using-cufon-font-using-jquery/9907126#9907126). – The Alpha Jul 16 '12 at 23:23
Just add `Cufon.refresh();` at last. – The Alpha Jul 16 '12 at 23:24
@SheikhHeera, Thank you Sheikh that fixed it! Added that to Roko's code and everything works out great! Thanks everyone – Robert Taylor Jul 16 '12 at 23:30
I thought Roko and you didn't see my comment so i answered it again, Welcome :-) – The Alpha Jul 16 '12 at 23:32

score 2 · Answer 2 · answered Jul 16 '12 at 23:29

Since you are using Cufon text so you need to call Cufon.refresh(); after you change any class to Cufon text, otherwise it won't take effect.

$('div[class$=link] h1 a').click(function(e){
    e.preventDefault();
    $('div[class$=link] h1 a').removeClass('selected');
    $(this).addClass('selected');    
    Cufon.refresh(); // Will refresh all `Cufon` text
});

Chandu · Answer 3 · 2012-07-16T23:16:45.227

1

You are using the ID selectors, instead you should be using the class selectors (since you have home-link etc assigned to class attribute and not id attribute of the div elements)

Try this:

var selected = "selected"; //Assuming you are storing it in a variable
$(function(){
    var allLinks = $('.home-link,.hiw-link,.faq-link,.prize-link,.media-link,.rules-link');
    allLinks.click(function(e){
        allLinks.find("h1 > a").removeClass(selected);
        $(this).find("h1 > a").addClass(selected);
    });
});

JsFiddle: http://jsfiddle.net/JsNBt/1/

edited Jul 16 '12 at 23:16

answered Jul 16 '12 at 22:59

Chandu

81,493
19
133
134

That doesn't seem to work, could it be because it's not looking for the class of the A tags? – Robert Taylor Jul 16 '12 at 23:14
@Chandu, [look at this answer](http://stackoverflow.com/questions/9906679/how-reload-refresh-styles-of-an-element-using-cufon-font-using-jquery/9907126#9907126). – The Alpha Jul 16 '12 at 23:34

Jquery Toggle Link Color

3 Answers3

jsBin demo