.message-show {
  display: inline;
  font-weight: 500;
  font-size: 15px;
}

.product-list {
  border: 1px solid #b1b8c9;
  color: $color-grey-light;
  font-size: 14px;
  display: inline-block;
  margin-right: 8px;
  padding: 5px 20px;
  border-radius: 4px;
  background-color: #ffffff;
  margin-top: 10px;
  cursor: pointer;
  &:hover {
    background-color: $color-safron;
    color: #ffffff;
  }
}
<ul class="message-show">

  <li v-on:click="displayMsg" @click="getPartingCharges('4')" :class="{ activeListItem }" class="product-list">5-10 </li>

  <li v-on:click="displayMessage" @click="getPartingCharges('10-22')" :class="{  active: isActiveClass,}" class="product-list">10-22 </li>

  <li v-on:click="displayMessage" @click="getPartingCharges('22-27')" :class="{  active: isActiveClass, }" class="product-list">22-27</li>



</ul>

मेरे पास 3 बटन हैं, जैसे ए, बी, सी। तो हर बटन पर क्लिक करने पर मुझे नीले रंग को हाइलाइट करने और वहां रहने की जरूरत है।

और जब उपयोगकर्ता अलग बटन दबाता है, तो रंग हाइलाइट को स्थानांतरित करने की आवश्यकता होती है।

0
david john 12 जुलाई 2021, 15:54

3 जवाब

सबसे बढ़िया उत्तर

यह समाधान केवल वेनिला जावास्क्रिप्ट के साथ काम करता है, मैंने समाधान की बेहतर समझ के लिए VueJS सिंटैक्स को हटा दिया है

let elements = document.querySelectorAll('.product-list')

elements.forEach(el => {
  el.addEventListener('click', () => {
    elements.forEach(el => el.classList.remove('active'))
    el.classList.add('active')
  })})
.message-show {
  display: inline;
  font-weight: 500;
  font-size: 15px;
}

.product-list {
  border: 1px solid #b1b8c9;
  color: lightgray;
  font-size: 14px;
  display: inline-block;
  margin-right: 8px;
  padding: 5px 20px;
  border-radius: 4px;
  background-color: #ffffff;
  margin-top: 10px;
  cursor: pointer;
}

.product-list:hover {
  background-color: blue;
  color: #ffffff;
}

.active {
  background-color: blue;
  color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
  <title>Document</title>
</head>
<body>
  <ul class="message-show">
    <li class="product-list">5-10</li>
    <li class="product-list">10-22</li>
    <li class="product-list">22-27</li>
  </ul>
</body>
</html>
0
Trillyy 12 जुलाई 2021, 13:16
<style>
.active{
   background-color: #0095ff;
 }
</style>

<script>
function getPartingCharges(){
  $(":button").removeClass("active");
  $(this).addClass("active");
 }
</script>
0
Farman Ud Din 12 जुलाई 2021, 13:12

मैं इस प्रश्न को पूरी तरह समझ नहीं पा रहा हूं इसलिए मैं 2 सीएसएस समाधान तैयार करूंगा:

  • यदि आप क्लिक बटन को होल्ड नहीं कर रहे हैं, तब भी बटन को हाइलाइट रहना है, तो उपयोग करें a:focus { background-color: blue; //or others }
  • इसके बजाय, यदि आप चाहते हैं कि बटन हाइलाइट किया जाए केवल जब आप उन्हें पकड़ रहे हों तो उपयोग पर क्लिक करें a:active { background-color: yellow; } उम्मीद है कि यह मदद करता है, आपके एचटीएमएल के साथ शुभकामनाएँ।
0
Cesare Colella 12 जुलाई 2021, 13:14