Hay una imagen a continuación, busque los botones (Alquilar, Comprar, Vender). Cuando hago clic en cualquiera de los botones enumerados (Alquilar, Comprar, Vender), el botón seleccionado debe tener un fondo blanco y el resto de los botones deben estar sin fondo. En breve, el botón seleccionado debería cambiar de estilo y reconocerse como seleccionado.
$("#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>Agregue '.search__item' a cada uno de los divs de alquiler/compra/venta.
En el evento de clic, elimine '.search__item--selected' y agregue esta clase para el elemento en el que se hizo clic
$(".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>