Hướng dẫn change button color after click bootstrap - thay đổi màu nút sau khi nhấp vào bootstrap

Tôi đang cố gắng thay đổi màu của nút khi nhấp. Tôi đang thực hiện nó trên nút Bootstrap có màu xanh. Nhưng mã của tôi không hoạt động.

Với mã JavaScript của tôi sau đây, nó không thay đổi màu sắc.

Organization Units 


Chiefdom


District 


Facility 

Đây là mã JavaScript:

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

Nick

134K22 Huy hiệu vàng52 Huy hiệu bạc89 Huy hiệu đồng22 gold badges52 silver badges89 bronze badges

Đã hỏi ngày 7 tháng 12 năm 2015 lúc 23:02Dec 7, 2015 at 23:02

Imadfooki fookiimadfooki fookiimadfooki fooki

1672 Huy hiệu vàng2 Huy hiệu bạc8 Huy hiệu đồng2 gold badges2 silver badges8 bronze badges

5

Xem ví dụ chức năng này:

$("button").click(function(){
  $("button").removeClass("active");
  $(this).addClass("active");
});

.active {
  background-color: green !important;
}

Organization Unitss 
            Chiefdom
            District 
            Facility 

Đã trả lời ngày 7 tháng 12 năm 2015 lúc 23:29Dec 7, 2015 at 23:29

3

Tôi không thích các câu trả lời khác vì họ yêu cầu

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

7 hoặc

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

8

Trong Bootstrap, trạng thái phần tử

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

9 cho các nút Bootstrap được chỉ định nhiều hơn so với các trạng thái phần tử khác (để hiểu điều này có nghĩa là gì, xem ở đây). Đây là lý do tại sao bạn có thể thấy mình có thể kiểm soát CSS của

$("button").click(function(){
  $("button").removeClass("active");
  $(this).addClass("active");
});

0 nhưng thấy rằng

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

9 bí ẩn không hoạt động.

Cách tôi có được xung quanh điều này là bằng cách tăng độ đặc hiệu của lớp CSS của tôi. Ví dụ:

.my-button:active {
    background-color: green;
} 

Tôi đã thay đổi nó thành

.my-button:not(:disabled):not(:disabled):active {
   background-color: green;
} 

Điều này cung cấp cho nó tính đặc hiệu như nhau cho bootstrap

$("button").click(function(){
  $("button").removeClass("active");
  $(this).addClass("active");
});

2. Sau đó, tôi chắc chắn rằng lớp tùy chỉnh của tôi xuất hiện đầu tiên trong đơn đặt hàng.

Connect with Us

Hi vọng điêu nay co ich! Chỉ là giải pháp cá nhân của tôi.

Đã trả lời ngày 9 tháng 4 năm 2019 lúc 16:17Apr 9, 2019 at 16:17

CameroncameronCameron

2.6353 huy hiệu vàng29 Huy hiệu bạc41 Huy hiệu đồng3 gold badges29 silver badges41 bronze badges

Thay thế

$("button").click(function(){
  $("button").removeClass("active");
  $(this).addClass("active");
});

3 bằng

$("button").click(function(){
  $("button").removeClass("active");
  $(this).addClass("active");
});

4 (nhỏ

$("button").click(function(){
  $("button").removeClass("active");
  $(this).addClass("active");
});

5) trong:

var b1 = document.getElementById("btnOUS");
_______________________________________^

Hi vọng điêu nay co ich.

---

Ví dụ cơ bản:

var b1 = document.getElementById("btnOUs");

b1.onclick = function() {
  b1.style.background = "green";  
}

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

0

Đã trả lời ngày 7 tháng 12 năm 2015 lúc 23:03Dec 7, 2015 at 23:03

Zakaria Acharkizakaria acharkiZakaria Acharki

66K15 Huy hiệu vàng73 Huy hiệu bạc99 Huy hiệu Đồng15 gold badges73 silver badges99 bronze badges

3

thử cái này. Tương tự cho các nút khác. Chỉ cần thay đổi tên ID

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

1

Đã trả lời ngày 8 tháng 12 năm 2015 lúc 7:24Dec 8, 2015 at 7:24

Sử dụng bộ chọn giả CSS sau:

Hoạt động: Nếu bạn chỉ muốn màu nền khi nút được nhấp và không muốn tiếp tục. : if you want background color only when the button is clicked and don't want to persist.

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

2

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

3

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

4

tài liệu tham khảo

Đã trả lời ngày 25 tháng 4 năm 2017 lúc 19:21Apr 25, 2017 at 19:21

Tùy chọn bạn có thể tạo các lớp CSS và chỉ cần thay đổi lớp khi nhấp.

Đã trả lời ngày 7 tháng 12 năm 2015 lúc 23:04Dec 7, 2015 at 23:04

BrianbrianBrian

1.0357 Huy hiệu bạc14 Huy hiệu đồng7 silver badges14 bronze badges

1

Bạn cũng có thể lấy hai nút thay vì một nút nên có màu xanh lá cây và một nút khác nên có màu xanh và áp dụng chức năng hiển thị và sau của jQuery.

$("button").click(function(){
  $("button").removeClass("active");
  $(this).addClass("active");
});

6

ban đầu nút #Green nên được ẩn.

Đã trả lời ngày 19 tháng 5 năm 2017 lúc 19:47May 19, 2017 at 19:47

$("button").click(function(){
  $("button").removeClass("active");
  $(this).addClass("active");
});

7 Vui lòng dùng thử chức năng CSS () này để tạo kiểu cho đối tượng. Tôi thêm vào việc nhấp vào sự kiện của nút.Please try this css() function use to style the object. I add on click event of button.

Đã trả lời ngày 9 tháng 8 năm 2020 lúc 13:59Aug 9, 2020 at 13:59

Riyas Acriyas ACRiyas Ac

1.4831 Huy hiệu vàng7 Huy hiệu bạc22 Huy hiệu đồng1 gold badge7 silver badges22 bronze badges

Bạn có thể sử dụng lớp nút Bootstrap để thay đổi màu của nút.

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

5

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

6

Đã trả lời ngày 29 tháng 10 năm 2021 lúc 9:59Oct 29, 2021 at 9:59

AbhiabhiAbhi

497 Huy hiệu Đồng7 bronze badges

Làm thế nào để thay đổi màu nút sau khi nhấp vào?

Thẻ nút nào dưới đây sẽ tạo nút màu xanh lá cây trong bootstrap?