Question

情况是我有两个按钮，每个按钮都有一个专用类。但是当我单击about按钮时，我希望类更改为highlightabout类，然后当我单击图形按钮时，我希望highlightabout类恢复到about类和图形类以更改为highlightgraph类。因此，当我点击任一按钮时，它们会相应地切换。

我有这个脚本，但我不明白为什么它不起作用：

HTML：

<div id="wrapper">
<ul><li><a class="about"><span>About</span></a></li>
        <li><a class="graph"><span>Graphic Design</span></a></li>
</ul>

.CSS：

.about { background:url(../button/about_btn.png) no-repeat left center; width:160px; height:50px; float:left;cursor:pointer}
.graph { background:url(../button/graph_btn.png) no-repeat left center; width:160px; height:50px; float:left;cursor:pointer}
.highlightabout {background:url(../button/about_btn.png) no-repeat right center; width:160px; height:50px; float:left; cursor:pointer}
.highlightgraph {background:url(../button/graph_btn.png) no-repeat right center; width:160px; height:50px; float:left; cursor:pointer}

脚本：

$('.about').click(function() {
    $(this).removeClass("about").addClass("highlightabout");
    $('.graph').removeClass("highlightgraph").addClass("graph");
});
$('.graph').click(function() {
    $(this).removeClass("graph").addClass("highlightgraph");
$('.about').removeClass("highlightabout").addClass("about");
});

感谢任何帮助。

更新：非常抱歉没有添加HTML，我认为这不会有帮助。现在也添加了HTML / .CSS。

Answer 1

我找到了解决方案：

<div id="wrapper">
    <ul><li><a id="about_button" class="about"><span>About</span></a></li>
        <li><a id="graph_button" class="graph"><span>Graphic Design</span></a></li>
    </ul>

我没有使用类，而是添加了锚标记的ID。因此脚本如下所示：

$('#about_button').click(function() {
   $(this).removeClass("about").addClass("highlightabout");
   $('#graph_button').removeClass("highlightgraph").addClass("graph");
});

$('#graph_button').click(function() {
   $(this).removeClass("graph").addClass("highlightgraph");
   $('#about_button').removeClass("highlightabout").addClass("about");
});

jsfiddle

Answer 2

。
$（ '图'）removeClass（ “highlightgraph”）addClass（ “图。”）;

不应该是：

。
$（ '图'）removeClass（ “图”）addClass（ “highlightgraph”）;

Answer 3

$('.about').click(function() {
    $(this).removeClass("about").addClass("highlightabout");
    $('.graph').removeClass("graph").addClass("highlightgraph");
});

$('.graph').click(function(e) {
    $('.highlightabout').removeClass("highlightabout").addClass("about");
    $(this).removeClass("highlightgraph").addClass("graph");
});

试试这个fiddle。

jQuery - 添加和删除类

3 个答案: