2

私はCufonを使用しており、ナビゲーションがあり、すべてのコンテンツが1つのページにあり、アンカータグを介してページのそのセクションにスクロールしていますが、リンクをクリックするとナビゲーションが表示されたままになり、リンクが点灯します:

これが私がこれまでに持っているものです：

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

を使用しているため、クラスを に変更した後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 に答える
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 に答える
1

ID セレクターを使用していますが、代わりにクラス セレクターを使用する必要があります (ホームリンクなどが div 要素の id 属性ではなく class 属性に割り当てられているため)

これを試して：

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 に答える