我有兩個 html 按鈕，單擊時會顯示不同的資訊。我正在使用 jQuery 更改哪個按鈕具有默認按鈕 CSS 和活動按鈕 CSS。我的代碼如下。目前，當我單擊相反的按鈕時，默認的活動按鈕不會切換到非活動樣式。有什么建議？提前致謝！
HTML：
<div class="center-buttons container space-between btn-group">
<button type="button" id="xValues" class="mobile-buttons desktop-w active-2">Button 1</button>
<button type="button" id="yValues" class="mobile-buttons desktop-w">Button 2</button></div>
jQuery：
$('.btn-group').on('click', 'button', function(){
$('.btn-group button.active-2').removeClass('active-2');
$(this).addClass('active-2');
CSS：
.center-buttons {
text-align: center;
margin: 20px 0px;
}
.container {
display: flex;
}
.space-between {
justify-content: space-between;
}
.mobile-buttons {
margin: 5px;
border: none;
border-bottom: 3px solid #B0B0B0;
color: #B0B0B0;
font-weight: 700;
font-size: 12px;
}
.active-2, .mobile-buttons:hover {
background-color: #fff;
border-bottom: 3px solid #2d2d2d;
color: #2d2d2d;
}
.desktop-w {
width: 49%;
}
uj5u.com熱心網友回復：
jQuery 代碼中似乎存在語法錯誤。當事件處理程式方法以“})”終止時，應用程式運行。
/* The event handler method is not terminated with "})". */
$('.btn-group').on('click', 'button', function(){
$('.btn-group button.active-2').removeClass('active-2');
$(this).addClass('active-2');
});.center-buttons {
text-align: center;
margin: 20px 0px;
}
.container {
display: flex;
}
.space-between {
justify-content: space-between;
}
.mobile-buttons {
margin: 5px;
border: none;
border-bottom: 3px solid #B0B0B0;
color: #B0B0B0;
font-weight: 700;
font-size: 12px;
}
.active-2, .mobile-buttons:hover {
background-color: #fff;
border-bottom: 3px solid #2d2d2d;
color: #2d2d2d;
}
.desktop-w {
width: 49%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center-buttons container space-between btn-group">
<button type="button" id="xValues" class="mobile-buttons desktop-w active-2">Button 1</button>
<button type="button" id="yValues" class="mobile-buttons desktop-w">Button 2</button></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/407053.html
標籤：
上一篇：獲取未在div上敲擊的文本