Tengo un proyecto en el que cuando hago clic en el títuloA, todos los bloques del títuloA deben agregarse con un estilo amarillo, y cuando se hace clic en el títuloB, se debe agregar un estilo amarillo a la página del títuloB, ¡y el estilo amarillo del títuloA será eliminado!
Pero no sé esto. Cómo lograr el efecto, necesito ayuda de todos, gracias.
$('#js-title1').on('click',function(){ $('#js-title1').addClass('active'); //點擊到的增加樣式 $('#js-title2').removeClass('active') //同層其他元素移除樣式}) body { padding: 30px; } .wrap { display: flex; margin-bottom: 100px; } .wrap .demo { font-weight: 900; margin: 30px; text-decoration: none; color: #222; } .wrap-2 { display: flex; } .wrap-2 .demo { font-weight: 900; margin: 30px; text-decoration: none; color: #222; } .active { position: relative; } .active::after { content: ""; position: absolute; bottom: 2px; left: 0; right: 0; display: block; width: 50px; height: 8px; background: #FFEB50; z-index: -1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="wrap"> <li> <a href="javascript:;" class="demo" id="js-title1">titleA</a> </li> <li> <a href="javascript:;" class="demo" id="js-title2">titleB</a> </li> </ul> <ul class="wrap-2"> <li> <a href="javascript:;" class="demo" id="js-title1">titleA</a> </li> <li> <a href="javascript:;" class="demo" id="js-title2">titleB</a> </li> </ul>Hay múltiples js-title1 y js-title2, no use ID, considere usar el nombre de clase css.
$('.js-title1').on('click',function(){ $('.js-title1').addClass('active'); //點擊到的增加樣式 $('.js-title2').removeClass('active') //同層其他元素移除樣式}) $('.js-title2').on('click',function(){ $('.js-title2').addClass('active'); //點擊到的增加樣式 $('.js-title1').removeClass('active') //同層其他元素移除樣式}) body { padding: 30px; } .wrap { display: flex; margin-bottom: 100px; } .wrap .demo { font-weight: 900; margin: 30px; text-decoration: none; color: #222; } .wrap-2 { display: flex; } .wrap-2 .demo { font-weight: 900; margin: 30px; text-decoration: none; color: #222; } .active { position: relative; } .active::after { content: ""; position: absolute; bottom: 2px; left: 0; right: 0; display: block; width: 50px; height: 8px; background: #FFEB50; z-index: -1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="wrap"> <li> <a href="javascript:;" class="demo js-title1">titleA</a> </li> <li> <a href="javascript:;" class="demo js-title2">titleB</a> </li> </ul> <ul class="wrap-2"> <li> <a href="javascript:;" class="demo js-title1">titleA</a> </li> <li> <a href="javascript:;" class="demo js-title2">titleB</a> </li> </ul>En lugar del atributo id , use el atributo class
y en jQuery, obtenga los elementos con . en lugar de #
Los ID deben ser únicos. No puede tener más de uno en la misma página. Quizás use un atributo de datos en su lugar. Aquí hay un ejemplo simplificado.
// When any title is clicked on $('.demo').on('click', function() { // Get the id from the dataset const id = $(this).data('id'); // Remove all the active classes $('.demo').removeClass('active'); // Add a class to all those elements that // have a data-id that matches the id $(`[data-id="${id}"`).addClass('active'); }); .active { background: #FFEB50; } .demo:hover { cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="demo" data-id="js-title1">titleA</a> <a class="demo" data-id="js-title2">titleB</a> <a class="demo" data-id="js-title1">titleA</a> <a class="demo" data-id="js-title2">titleB</a>Documentación adicional