Question

不知何故，add class方法对任何想法都不起作用？

＆＃13;

$('#select-mode').click(function() {
  $('#select-mode').addClass("btn-mode-selec-color");
  $('#draw-mode').removeClass('btn-mode-selec-color');
});

$('#draw-mode').click(function() {
  $('#draw-mode').addClass('btn-mode-selec-color');
  $('#select-mode').removeClass('btn-mode-selec-color');
});

＆＃13;

.btn-mode-selec-color {
  background-color: #D2D2D3;
  box-shadow: 10px 10px 5px #888888;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn-lg" id="draw-mode">Draw Mode</button>
<button type="button" class="btn btn-default btn-lg" id="select-mode">Select Mode</button>

＆＃13;

Answer 1

一切都按预期工作。我认为你没有添加jquery

$('#select-mode').click(function() {
    $('#select-mode').addClass("btn-mode-selec-color");
    $('#draw-mode').removeClass('btn-mode-selec-color');
});

$('#draw-mode').click(function() {
    $('#draw-mode').addClass('btn-mode-selec-color');
    $('#select-mode').removeClass('btn-mode-selec-color');
});

.btn-mode-selec-color {
    background-color: #D2D2D3;
    box-shadow: 10px 10px 5px #888888;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn-lg" id="draw-mode">Draw Mode</button>
<button type="button" class="btn btn-default btn-lg" id="select-mode">Select Mode</button>

Answer 2

导致问题：您使用按钮btn btn-default btn-lg

的Bootstrap类

解决方案：在您的css代码中添加!important;;

background-color: #D2D2D3 !important; box-shadow: 10px 10px 5px #888888 !important;

Jquery add Class不添加或删除类

2 个答案: