有下圖，尋找按鈕（租、買、賣）。當我點擊任何列出的按鈕（租、買、賣）時，所選按鈕應該有白色背景，其余按鈕應該沒有背景。不久，選定的按鈕應更改樣式并被識別為選定。
$("#search-item2").on("click", function() {
$(this).addClass("search__item--selected");
$("#search-item1").removeClass("search__item--selected");
});.search__item--selected {
background-color: hsla(0, 0%, 100%, 0.7);
backdrop-filter: blur(10px);
color: var(--text-color);
text-transform: uppercase;
border-radius: 15px 15px 0 0;
padding: 7px 29px;
}
.search__item {
font-size: 14px;
text-transform: uppercase;
color: var(--text-color2);
cursor: pointer;
padding: 7px 29px;
}
:root {
--text-color: blue;
--text-color2: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search__tab">
<div class="search__item--selected" id="search-item1">
<p class="search__name">Rent</p>
</div>
<div class="search__item" id="search-item2">
<p class="search__name">Buy</p>
</div>
<div class="search__item" id="search-item3">
<p class="search__name">Sell</p>
</div>
</div>圖片
uj5u.com熱心網友回復：
將“.search__item”添加到每個租/買/賣 div。
在單擊事件上，洗掉 '.search__item--selected' 并為單擊的元素添加此類
$(".search__item").on("click", function() {
$(".search__item").removeClass("search__item--selected");
$(this).addClass("search__item--selected");
});body {
background: #b6b5b5;
}
.search__item--selected {
background-color: hsla(0, 0%, 100%, 0.7);
backdrop-filter: blur(10px);
color: var(--text-color);
text-transform: uppercase;
border-radius: 15px 15px 0 0;
padding: 7px 29px;
}
.search__item {
font-size: 14px;
text-transform: uppercase;
color: var(--text-color2);
cursor: pointer;
padding: 7px 29px;
}
:root {
--text-color: blue;
--text-color2: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search__tab">
<div class="search__item search__item--selected" id="search-item1">
<p class="search__name">Rent</p>
</div>
<div class="search__item" id="search-item2">
<p class="search__name">Buy</p>
</div>
<div class="search__item" id="search-item3">
<p class="search__name">Sell</p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392419.html
標籤：javascript html 查询 css