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如果您网站上的每个无序列表都有此行为，您还可以保存一些标记并使用。

这里有两个解决方案。单击标题以查看示例。

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>

Css 解决方案，使用 :hover

根据您要添加多少功能，我个人更喜欢只使用:hover伪类并完全跳过 Javascript。

CSS

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