1

リンクのリストとロゴのリストを含むページを書いています。対応するロゴ (.chicken_shops) に一致するリンク (#chicken_link) にカーソルを合わせると、.chicken_shops div に「アクティブ」のクラスが適用されるので、それを使用して css を実行できます。

私は求めていた機能を持っていますが、これを書くには、私が行った方法よりもスマートな方法が必要だと思います。明らかでない場合、私はjsに精通していません。

これは私のコードです

<script type="text/javascript">
$(document).ready(function(){
    $('#chicken_link').hover(
        function(){$('.chicken_shops').addClass('active');},
        function(){$('.chicken_shops').removeClass('active');}
    );

    $('#rice_link').hover(
        function(){$('.rice_shops').addClass('active');},
        function(){$('.rice_shops').removeClass('active');}
    );

    $('#beans_link').hover(
        function(){$('.beans_shops').addClass('active');},
        function(){$('.beans_shops').removeClass('active');}
    );
    <!-- etc. -->
});
</script>

私のHTML：

<ul>
    <li><a href="#" id="chicken_link">Chicken</a></li>
    <li><a href="#" id="rice_link">Rice</a></li>
    <li><a href="#" id="beans_link">Beans</a></li>
    <!-- etc. -->
</ul>

<ul>
    <li class="chicken_shops"><a href="#">The Chicken Shop</a></li>
    <li class="rice_shops"><a href="#">The Rice Shop</a></li>
    <li class="beans_shops">The Bean Shop</li>
    <!-- etc. -->
</ul>

それは機能しますが、これをよりコンパクトまたはスマートな方法で記述するにはどうすればよいですか?

助けてくれてありがとう！

4

1 に答える 1

0

本当にJavascript に固執したい場合は、代わりにあまり具体的でないセレクターを使用することを検討してください。

たとえば、クラス セレクターを使用することは、必要なものすべてを確実にターゲットにできるという点で優れたソリューションです。また、マークアップを保存ul liして、サイトのすべての順序付けられていないリストがこの動作をする場合に使用することもできます。

ここに2つの解決策があります。タイトルをクリックすると、例が表示されます。

クラスを使用した Javascript ソリューション

jQuery

$(document).ready(function() {

  $('.toggle').hover(
    function(){ $(this).addClass('active'); },
    function(){ $(this).removeClass('active'); }
  );

});

HTML

<ul>
  <li><a href="#" id="chicken_link" class="toggle">Chicken</a></li>
  <li><a href="#" id="rice_link" class="toggle">Rice</a></li>
  <li><a href="#" id="beans_link" class="toggle">Beans</a></li>
</ul>

:hover を使用した Css ソリューション

これに追加する機能の量にもよりますが、私は個人的には疑似クラスのみを使用:hoverし、Javascript を完全にスキップすることを好みます。

CSS

.toggle:hover {
  background: #eee;
}
于 2013-05-29T02:19:07.800 に答える