Jquery切换链接颜色

Jquery Toggle Link Color

本文关键字：颜色 链接 Jquery      更新时间：2023-10-25

我正在使用Cufon，我有我的导航，我的所有内容都在一个页面上，它通过锚标记滚动到页面的那个部分，但导航保持可见，当你点击链接时，链接会亮起：

以下是我目前所拥有的：

<!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>

所以基本上，正如你所看到的，我只是试图将selected的类添加到锚标记中，并将其从其他所有内容中删除，这样只有那个链接是红色的。非常感谢你的帮助。

jsBin演示 

$('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
});

由于您使用的是Cufon text，因此在将任何类更改为Cufon text后都需要调用Cufon.refresh();，否则它将不会生效。

$('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
});

您使用的是ID选择器，而应该使用类选择器（因为您将home链接等分配给了div元素的class属性，而不是ID属性）

试试这个：

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);
    });
});

Js报价：http://jsfiddle.net/JsNBt/1/

相关文章：