Question

大家好日子！

我正在努力开发这段代码。我一直在寻找这个论坛，非常接近，但可以得到它。

我正在尝试在链接之间切换以突出显示当前链接。

这里已经讨论过了，但我似乎无法找到符合我问题的解决方案。

我设法获得切换，添加类和删除类的链接。

我感到困惑的是如何分配默认类。

含义我想给链接一个默认样式，然后使用add / remove类切换来覆盖它。

目前链接在默认情况下没有样式，如果我直接用CSS设置样式，那么脚本不起作用。那是因为我找不到删除那种风格的方法。

代码：

$(document).ready(function() {
 $("#test a").click(function () {
      $(".normal").removeClass("normal");
      $(this).toggleClass('normal');
    });
 });

HTML：

<div id="test">
<a href="#">Testing</a>
<a href="#">Testing</a>
<a href="#">Testing</a>
</div>

解决方案：为了完成这项工作，我只是将 CSS！important声明放在我要覆盖的样式上。由于默认样式直接放在选择器上，因此不允许任何其他样式接管。含义，如果将两个样式应用于一个元素，则直接样式需要付费。

CSS

.active{/*SETS THE ACTIVE STYLE*/
    color: #333 !important;
    text-decoration: none;
    font-size: 16px;
}

#test a{ /*SETS THE DEFAULT STYLE*/
    color: #666;
    text-decoration: none;
    font-size: 16px;
}

JQuery：

$(document).ready(function() {
 $("#test a").click(function () {
      $(".normal").removeClass("active");
      $(this).toggleClass('active');
    });
 });

HTML：

    <div id="test">
    <a href="#">Testing</a>
    <a href="#">Testing</a>
    <a href="#">Testing</a>
    </div>

Answer 1

用普通的旧css做吧：）

<a href="#" class="foo">Testing</a>

这会给每个人一个默认的类。

编辑只是重新阅读您的问题，仍然使用CSS，然后如果您执行以下操作：

$("a").removeClass();

它应该删除所有类。

链接之间的突出显示和切换 - 如何设置默认类

1 个答案: