Javascript 如何在点击按钮时更改类

我有两个按钮：没有背景和绿色，当我点击它们时，我需要它们改变（从绿色到底部有虚线边框的那个）

这是我的html：

 <div class="btns">
                <button type="button" class="btn btn-success">Муж</button>
                <button type="button" class="btn btn-link btn-simple">Жен</button>
           </div>

但它不起作用

下面是我添加到css文件中的内容：

.btn-simple {
    border-bottom: 1px dashed #000;
    color: #000;
}

---

没有别的，因为这些是引导按钮。

您应该在document.ready方法中添加代码

$(document).ready(function () {
        $('.btn').click(function () {
            var $this = $(this);
            if ($this.hasClass('btn-success')) {
                $this.removeClass().addClass('btn-simple');
            } else if ($this.hasClass('btn-simple')) {
                $this.removeClass('btn-simple').addClass('btn-success');
            }
        });
    });

---

您没有删除一个btn成功类。另外，我认为您应该添加btn链接类。同时，将这一整块包装在document.ready中

$(document).ready(function () {
    $('.btn').click(function() {
        var $this = $(this);
        if ($this.hasClass('btn-success')) {
            $this.removeClass('btn-success').addClass('btn-simple');
        } else if ($this.hasClass('btn-simple')) {
            $this.removeClass('btn-simple').addClass('btn-link').addClass('btn-success');
           }
    });
});

---

您需要添加要删除的类，例如：$this.removeClass（'btn-success'）。在下面的链接中，我举了一个例子

   $('.btn').click(function(){
       var $this = $(this);
       if (!$this.hasClass('btn-success')) {
        $('.btn').removeClass('btn-success')
        $this.addClass('btn-success');

       }
    })

---

假设您希望在共享容器中的按钮之间切换

/*用于演示的较长版本*/
$（'.btn'）。单击（函数（）{
var thisParent=$（this）.closest（'.btns'）；
$（thisParent）.find（'.btn success'）.addClass（'btn-simple'））
$（thisParent）.find（'.btn success'）.removeClass（'btn-success'）；
$（this.removeClass（'btn-simple'）；
$（this.addClass（'btn-success'）；
})
/*较短版本
$（'.btn'）。单击（函数（）{
$（this）.closest（'.btns'）.find（'.btn-success'）.addClass（'btn-simple'）.removeClass（'btn-success'）；
$（this）.removeClass（'btn-simple'）.addClass（'btn-success'）；
})
*/

*{outline:0；}按钮{边框样式：无；光标：指针；填充：5px；}按钮：：-moz焦点内部{边框：0；}
/*忽略上面*/
.btn简单{
边框底部：1px虚线#000；
颜色：#000；
}
.btn成功{
背景色：hsla（96,92%，37,1）；
边界半径：2px；
}

Муж
Жен
Муж
Жен
три

查看toggleClass

   $('.btn').click(function(){
       var $this = $(this);
       if (!$this.hasClass('btn-success')) {
        $('.btn').removeClass('btn-success')
        $this.addClass('btn-success');

       }
    })