2

我正在使用 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 类添加到锚标记并将其从其他所有内容中删除，因此只有该链接是红色的。非常感谢您的帮助。

4

3 回答 3

2

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
});
于 2012-07-16T22:57:51.877 回答
2

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

$('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
});
于 2012-07-16T23:29:59.427 回答
1

您正在使用 ID 选择器，而应该使用类选择器（因为您将 home-link 等分配给类属性而不是 div 元素的 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);
    });
});

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

于 2012-07-16T22:59:37.050 回答