我有多個按鈕具有活動和非活動類。我想讓它成為一個更短的代碼并使其成為全球性的。請幫我怎么做。并且還添加了一個元素，該元素在每個單擊按鈕都處于活動狀態時顯示和隱藏。
$('.show-btn').on('click', function(){
$(this).addClass('active');
$('.hide-btn').removeClass('active')
$('.p-thanks').removeClass('inactive')
})
$('.hide-btn').on('click', function(){
$(this).addClass('active');
$('.show-btn').removeClass('active')
$('.p-thanks').addClass('inactive')
})
$('.approve').on('click', function(){
$(this).addClass('active');
$('.disapprove').removeClass('active')
$('.p-approve').removeClass('inactive')
})
$('.disapprove').on('click', function(){
$(this).addClass('active');
$('.approve').removeClass('active')
$('.p-approve').addClass('inactive')
})
$('.agree').on('click', function(){
$(this).addClass('active');
$('.disagree').removeClass('active')
$('.p-agree').removeClass('inactive')
})
$('.disagree').on('click', function(){
$(this).addClass('active');
$('.agree').removeClass('active')
$('.p-agree').addClass('inactive')
})<style>
.active{
background-color: blue;
color: white;
}
.inactive{display: none;}
.btn{padding: 5px 20px;}
div{margin-top:20px;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="show-btn btn">Show</button>
<button class="hide-btn btn">Hide</button>
<br>
<p class="p-thanks inactive">Thank you</p>
</div>
<div>
<button class="approve btn">Approve</button>
<button class="disapprove btn">Disapprove</button>
<br>
<p class="p-approve inactive">Approve</p>
</div>
<div>
<button class="agree btn">Agree</button>
<button class="disagree btn">Disagree</button>
<br>
<p class="p-agree inactive">Agree</p>
</div>我想要實作的只是更少的代碼。
uj5u.com熱心網友回復：
您可以使用兄弟姐妹（）來訪問 DOM 元素，如下所述：
$('.btn').on('click', function(){
$(this).addClass('active');
$(this).siblings('.btn').removeClass('active');
$(this).siblings('p').toggleClass('inactive');
});<style>
.active{
background-color: blue;
color: white;
}
.inactive{display: none;}
.btn{padding: 5px 20px;}
div{margin-top:20px;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="show-btn btn">Show</button>
<button class="hide-btn btn">Hide</button>
<br>
<p class="p-thanks inactive">Thank you</p>
</div>
<div>
<button class="approve btn">Approve</button>
<button class="disapprove btn">Disapprove</button>
<br>
<p class="p-approve inactive">Approve</p>
</div>
<div>
<button class="agree btn">Agree</button>
<button class="disagree btn">Disagree</button>
<br>
<p class="p-agree inactive">Agree</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/491026.html
標籤：javascript html jQuery css
上一篇：Linux Accounting系列(中文翻譯): Pressure Stall Information
下一篇：將一部分狀態傳遞給React組件