मैं चयन विकल्प बनाने की कोशिश कर रहा हूं और मुझे चयनित आइटम की कक्षा को बदलने की जरूरत है (माउस ओवर पर), इसलिए मूल रूप से मैं वेब-डेवलपर नहीं हूं इसलिए मुझे नहीं पता कि इसे कैसे प्राप्त किया जाए, मैं इसके लिए शोध करने की कोशिश कर रहा था, लेकिन मैं सफल नहीं हुआ।

इसलिए मुझे दो चीजों की आवश्यकता है, एक बार जब उपयोगकर्ता चयनित राय पर माउस ले जाता है तो li का वर्ग dk_option_current में बदल जाता है और एक बार जब उपयोगकर्ता चयन पर क्लिक करता है तो मैं भविष्य की कुछ चीजें कर सकता हूं, मैं वास्तव में नहीं जानता इसे कैसे प्राप्त किया जाए, मैं जावास्क्रिप्ट का उपयोग कर रहा हूं, लेकिन यह मुझे स्वयं करने के लिए बहुत काम है।

<div class="dk_container dk_theme_black dk_open" id="dk_container_arrow-tip" tabindex="1" style="display: block;">
  <a class="dk_toggle" style="width: 129px;">
    <span class="dk_label">TopHat 3D 60g</span>
  </a>
  <div class="dk_options">
    <ul class="dk_options_inner">
      <li class="dk_option_current"><a data-dk-dropdown-value="1">TopHat 3D 20g</a></li>
      <li class=""><a data-dk-dropdown-value="2">TopHat 3D 70g</a></li>
      <li class=""><a data-dk-dropdown-value="4">TopHat 3D 100g</a></li>
      <li class=""><a data-dk-dropdown-value="6">Brass 3D 70g</a></li>
      <li class=""><a data-dk-dropdown-value="7">Brass 3D 100g</a></li>
      <li class=""><a data-dk-dropdown-value="9">Brass Bullet 70g</a></li>
      <li class=""><a data-dk-dropdown-value="10">Brass Bullet 100g</a></li>
      <li class=""><a data-dk-dropdown-value="12">Steel Field 70g</a></li>
      <li class=""><a data-dk-dropdown-value="13">Steel Field 100g</a></li>
    </ul>
  </div>
</div>
0
DzITC 18 अप्रैल 2020, 17:02

1 उत्तर

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

आप वास्तव में सीएसएस का उपयोग करने के बजाय mouseover का उपयोग करना पसंद करेंगे :hover आप इसे इस तरह कर सकते हैं:

$(document).ready(function() {
   $(".dk_options_inner li").mouseover(function() {
      $(".dk_options_inner li").removeClass("dk_option_current");
      $(this).addClass("dk_option_current");
   });
   $(".dk_options_inner li").click(function() {
      $(".dk_options_inner li").removeClass("dk_option_current selected");
      $(this).addClass("dk_option_current selected");
      $(".dk_label").text($(this).text());
   });
});
.dk_option_current, .selected {
  color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dk_container dk_theme_black dk_open" id="dk_container_arrow-tip" tabindex="1" style="display: block;"><a class="dk_toggle" style="width: 129px;"><span class="dk_label">TopHat 3D 20g</span></a>
  <div class="dk_options">
    <ul class="dk_options_inner">
      <li class="dk_option_current selected"><a data-dk-dropdown-value="1">TopHat 3D 20g</a></li>
      <li class=""><a data-dk-dropdown-value="2">TopHat 3D 70g</a></li>
      <li class=""><a data-dk-dropdown-value="4">TopHat 3D 100g</a></li>
      <li class=""><a data-dk-dropdown-value="6">Brass 3D 70g</a></li>
      <li class=""><a data-dk-dropdown-value="7">Brass 3D 100g</a></li>
      <li class=""><a data-dk-dropdown-value="9">Brass Bullet 70g</a></li>
      <li class=""><a data-dk-dropdown-value="10">Brass Bullet 100g</a></li>
      <li class=""><a data-dk-dropdown-value="12">Steel Field 70g</a></li>
      <li class=""><a data-dk-dropdown-value="13">Steel Field 100g</a></li>
    </ul>
  </div>
</div>
1
matthias_h 18 अप्रैल 2020, 14:27