如何使用javascript获得经典的悬停、活动等行为

Question

我有一个简单的问题，我总是遇到。现在我总是使用相同的解决方案，但我猜这不是正确的方法。

下面是一个例子：

如果有一个有6个链接和6个标签的页面。每个链接显示或隐藏一个带有javascript的选项卡(显示:块/无)。我遇到了正常的html/css方式不起作用的问题。我可以设置我的css使一个链接悬停，但像活动，等等的东西不起作用。现在，我使用6个单独的函数来操作每个链接的样式，这样当人们单击链接5时，链接5会加下划线，其余的则不加下划线。

我已经尝试过使用.this和obj.来重构我的代码，但这仍然不能给出我想要的行为。似乎一旦你用js改变了css，css就不再起作用了。

我无法想象这是实现正常html链接行为的正确方法吗？

有谁有主意吗？如何解决此问题？对于所有内容都是自动生成的新项目来说，这成为了一个真正的问题。

Answer 1

一旦你用js改变了css，css似乎就不再起作用了。

这表明(直接或通过某种抽象)您正在使用JS更改元素的.style.*属性。

这些映射到style属性，该属性总是被认为是“最specific的”。

解决方案是不使用style属性。如果你想改变一个元素的样式，那么在样式表中预写你的CSS。然后使用JavaScript修改元素的className。

这使您可以更好地控制正在应用的样式。

(这只是遵循了通常的关注点分离规则。开发人员通常在将CSS与HTML和JS与HTML分开方面做得越来越好，但最常见的失误是未能将CSS与JS分开。)

Answer 2

如果使用jQuery，可以使用悬停功能轻松创建悬停状态效果。

if ($("#tab").hasClass('active') {
    $(".class-of-item-to-show").show();
}

$("#tab1").hover(
  function () {
    $(".class-of-item-to-show").show();
  }, 
  function () {
    $(".class-of-item-to-show").hide();
  }
);

如果你张贴你的标签和数据以显示在问题中，我可以帮助你将其设置为循环。

Answer 3

我认为你可以用jQuery实现你想要的功能。

我将只放一个示例代码，这样您就可以有一个想法。下面是一组链接。

<a href ="#" class ="test not" >a</a>
<a href ="#" class ="test not" >b</a>
<a href ="#" class ="test not" >c</a>

然后使用jQuery live，您可以为任何事件编写代码，例如，我将展示如何在悬停事件中移除和添加类

<script type ="text/javascript">
    $(document).ready(function () {
        $('.test').live('hover', function () {

            $(this).removeClass('not');
            $(this).addClass('selected');                     

        });
    });
</script>

就像上面的代码一样，你可以通过单独选择来识别链接。你也可以使用任何其他事件作为'hover‘

希望这能有所帮助