تبديل حالة العناصر بتمرير المؤشر عليها

To automate the hover effect in your jQuery code and avoid duplication, you can use a single event listener with a data attribute to determine which element to toggle. Here’s how you can modify your code:

HTML:

htmlCopy code
<div class="row col-sm-4">
  <ul class="text-center">
    <li><p class="chat-provider-tab tab" data-target=".chat-provider">Chat Providerp>li>
    <li><p class="operations-tab tab" data-target=".operations">Operationsp>li>
    <li><p class="proactive-chat-tab tab" data-target=".proactive-chat">Proactive Chatp>li>
  ul>
div>
<div class="row col-sm-8">
  <p class="chat-provider helptip" style="display: none">Chat Providerp>
  <p class="operations helptip" style="display: none">Operationsp>
  <p class="proactive-chat helptip" style="display: none">Proactive Chatp>
div>

jQuery:

javascriptCopy code
$(".tab").hover(function() {
  var target = $(this).data("target");
  $(target).toggleClass("activetab");
});

In this modified code, each tab element (

with class tab) now has a data-target attribute specifying the class of the element to toggle. The jQuery code then reads this attribute and toggles the class accordingly.

This approach eliminates the need for separate event listeners for each tab, making your code more efficient and easier to maintain.

التعديلات التي قمت بها في الكود تسمح بتحقيق الهدف بشكل أكثر فعالية وسهولة صيانة، حيث يتم استخدام خاصية data-target لتخزين اسم الفئة التي يجب تبديل حالتها عند حدوث الحدث hover على عنصر. بمجرد أن يحدث الحدث hover، يقوم الكود بقراءة قيمة الخاصية data-target ويبديل حالة الفئة المعنية باستخدام الدالة toggleClass.

بهذا الشكل، لن تحتاج إلى تكرار الكود لكل عنصر بحيث يمكنك إضافة مزيد من الأقسام أو الألسنة في وقت لاحق دون الحاجة إلى تعديل الجزء الخاص بالـ JavaScript.