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

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

情况如下：

如果有6个链接和6个标签页。每个链接使用javascript显示或隐藏一个选项卡（显示：block/none）。我遇到了一个问题，普通的html/css方式不起作用。我可以将css设置为使链接悬停，但活动等功能不起作用。现在，我使用6个单独的函数来操纵每个链接的样式，这样当人们单击链接5时，链接5会带下划线，其余的不会

我已经尝试使用

重构我的代码。这
和
对象。
但这仍然没有给出我想要的行为。一旦你用js改变了css，css似乎就不起作用了

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

有人有想法吗？如何解决这个问题？这对于我的新项目来说是一个真正的问题，因为所有内容都是自动生成的。
如果使用jQuery，可以使用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();
  }
);

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

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

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

这些映射到
样式
属性，该属性通常被认为是“最”

解决方案是不使用“样式”属性。如果要更改元素的样式，请在样式表中预先编写CSS。然后使用JavaScript修改元素的
className

这样可以更好地控制应用的样式

（这只是遵循了关于关注点分离的常规规则。开发人员通常会更好地将CSS与HTML分开，将JS与HTML分开，但最常见的错误是未能将CSS与JS分开）
我认为使用jQuery可以实现您想要的功能

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

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



然后使用jquerylive，您可以为任何事件编写代码，例如，我将展示如何在hover事件中删除和添加类

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

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

        });
    });
</script>


$（文档）.ready（函数（）{
$（'.test'）.live（'hover'，函数（）{
$（this.removeClass（'not'）；
$（this.addClass（'selected'）；
});
});

像上面的代码一样，您可以单独识别带有所选链接的链接。您也可以将任何其他事件用作“悬停”

希望这有帮助
你能给我们看一点html/css/js代码吗？你能发布你的html以便我能为你写一个jQuery解决方案吗？