如何获得经典的悬停、活动等。 JavaScript 的行为

Question

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

情况如下：

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

我已经尝试使用 .this 和 obj. 重构我的代码，但这仍然没有给出我想要的行为。貌似用js改了css之后css就不行了。

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

有人有想法吗？你如何解决这个问题？对于我的新项目来说，这成为一个真正的问题，因为所有内容都是自动生成的。

Answer 1

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

这表明（直接通过一些抽象）您正在使用 JS 来更改元素的 .style.* 属性。

这些映射到 style 属性，该属性始终被认为是“最具体”。

解决方案是保留 style 属性。如果您想更改元素的样式，请在样式表中预先编写 CSS。。然后使用 JavaScript 修改元素的 className。

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

（这只是遵循关注点分离的通常规则。开发人员通常越来越擅长将 CSS 与 HTML 分开，将 JS 与 HTML 分开，但最常犯的错误是未能将 CSS 与 JS 分开）

Answer 2

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

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>

如上面的代码，您可以单独识别选定的链接。您也可以使用任何其他事件作为“悬停”

希望这有帮助