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属性，该属性始终被视为“最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>

与上面的代码一样，您可以分别识别选定的链接。您可以将任何其他事件用作“悬停”

希望这会有所帮助

如何获得经典的悬停，活跃等。使用javascript的行为

3 个答案: