2

このようなレイアウトを持つ：

http://jsfiddle.net/UuD73/27/

<div>
    navi 1<br>
<a href="#anchor1">Anchor 1</a><br/>
<a href="#anchor2">Anchor 2</a><br/>
<a href="#anchor3">Anchor 3</a><br/>
    navi 2<br>
<a href="#anchor1">Anchor 1</a><br/>
<a href="#anchor2">Anchor 2</a><br/>
<a href="#anchor3">Anchor 3</a><br/>
</div>

</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="anchor1" id="anchor1">Here is anchor 1</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="anchor2" id="anchor2">Here is anchor 2</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="anchor3" id="anchor3">Here is anchor 3</a>

​div{
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
}
a, a:active, a:visited{
    color: green;
}

ページ内のアンカーにジャンプする 2 つの同一のナビゲーション メニューがあります。できればCSSのみを使用して、そのうちの1つがクリックされたときに2つのアクティブなリンクに色を付けることができますか?

編集：フィドルを更新しました。2 つのナビゲーション メニューが表示されていないことに気付きました

4

2 に答える 2

4

css のみで可能かどうかはわかりませんが、jquery を使用するとこのようにできます。こうだったら欲しかったのでは？

あなたのhtml

<div>
<a href="#anchor1">Anchor 1</a><br/>
<a href="#anchor2">Anchor 2</a><br/>
<a href="#anchor3">Anchor 3</a><br/>
</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="anchor1" id="anchor1">Here is anchor 1</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="anchor2" id="anchor2">Here is anchor 2</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="anchor3" id="anchor3">Here is anchor 3</a>

​

Jクエリ

$(function(){
    $('a').click(function(){
        $('a').css('color', 'green');
       var selector = $(this).attr('href');
        $(selector).css('color', 'black');
    });
});​

そしてあなたのCSS

div{
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
}
a, a:active, a:visited{
    color: green;
}
​

ここでの実例@ jsfiddle

于 2012-09-11T17:22:27.337 に答える
2

私は先に進み、matmaticoのjsFiddleを更新しました

  1. :active 疑似クラスのスタイルは、アンカーをクリックすると表示されますが、離すと消えます。
  2. addClass/removeClass を使用して色を正しく切り替えるように、mattematico のスクリプトを簡素化しました。
  3. スタイル シートに .activeLink クラスを追加しました。

編集

更新されたフィドル

$(function() { 
    // selector for any anchor with an href that begins with '#'.
    var bookmarkSelector = 'a[href^="#"]';
    $(bookmarkSelector).click(function(){ 
        $(bookmarkSelector).removeClass('activeLink'); 
        $('a[href="' + $(this).attr('href') + '"]').addClass('activeLink'); 
    });
});​
  1. クリック機能がブックマーク アンカーにのみ適用されるようにセレクターを更新しました。
  2. そのような場合に効果が発生しないように、stackoverflow へのリンクと js-alert リンクを追加しました。
  3. この投稿へのリンクを追加しました。
  4. <br/> タグを削除しました。
于 2012-09-11T17:40:15.230 に答える