Question

我是新的堆栈溢出，我已经在这个网站上搜索了其他答案。我找到了类似的东西，但问题是使用其他预制标签，我对JQuery的有限知识无法帮助我根据另一个解决我的问题。

所以，基本上我开始学习JQuery，我的作业要求我创建一个简单的选项卡表示。我的问题是，当我选择一个按钮并突出显示它时，当选择另一个按钮时突出显示应该消失，但它没有。

这是JQuery代码：

    $(document).ready(function() { 
        $(".tab").hide();
        $("[id=1]").show();
        $("#switcher .button").click(function(){                
            var a = $(this).attr("title");
            $(".tab").hide();
            $("[id="+a+"]").show();
            $("[val="+a+"]").addClass("button1");
        }); 
        $("[val="+a+"]").addClass('button');
    });

这是HTML：

<div class="tabs">
  <div id="switcher" class="switcher">
    <div class="label"><i>Custom tab</i></div>
    <div val="1" title="1" class="button">Open Start</div>
    <div val="2" title="2" class="button">Connect</div>
    <div val="3" title="3" class="button">Pin apps</div>
  </div>
  <div id="1" class="tab">Tab1 text</div>
  <div id="2" class="tab">Tab2 text</div>
  <div id="3" class="tab">Tab3 text</div>
</div>

在我的CSS中，我将按钮作为普通按钮，而button1是更改了背景文本和文本修饰的类。如果有人可以提供帮助，我将不胜感激。谢谢:)）

Answer 1

从所有button1

中删除button课程

$(document).ready(function() { 
    $(".tab").hide();
    $("[id=1]").show();
    $("#switcher .button").click(function(){                
        var a = $(this).attr("title");
        $(".tab").hide();
        $("[id="+a+"]").show();
        $('.button').removeClass('button1'); //Add this line.
        $("[val="+a+"]").addClass("button1");
    }); 
    $("[val="+a+"]").addClass('button');
});

单击另一个按钮时，JQuery取消选择按钮

1 个答案: