1

アクティブなリンクの背後に背景画像があり、次のリンクをクリックすると画像が次のアクティブなリンクに移動するナビゲーション メニューを作成しようとしています。これが CSS だけでできるのか、それとも jQuery も必要なのかはわかりません。

<div id="header">
    <div id="company_name">

    </div>
        <ul id="gen_navigation" class="container_fixed">
            <li><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>About</span></a></li>
            <li><a href="#"><span>Technology</span></a></li>
            <li><a href="#"><span>Applications</span></a></li>
            <li><a href="#"><span>Benefits</span></a></li>
            <li><a href="#"><span>Inquiries</span></a></li>
        </ul>

</div>

http://jsfiddle.net/Dk6eq/

注：現時点では基本的なcssとhtmlしかありません

4

1 に答える 1

1

CSSには永続的な「クリック」トリガーがないため、CSSだけでは実行できません。

次のようなCSSクラスを追加するだけです

.active {
   background-image: url(...)
}

そして、クリックすると…

$("#gen_navigation a").on('click', function () {
   $("#gen_navigation a").removeClass('active');
   $(this).addClass('active');
});
于 2012-12-14T02:17:47.727 に答える