إنشاء وظيفة JavaScript لتبديل الفئات بين عناصر القائمة اعتمادًا على أي واحد تم النقر عليه

Question

أحاول إنشاء وظيفة لتغيير الفصل على سلسلة من عناصر قائمة 5 اعتمادًا على النقر عليها. الهدف من ذلك هو تغيير نمط العنصر اعتمادًا على العنصر الحالي.

لقد جربت شيئًا كهذا:

function addClass(obj)
{
 obj.className="highlight";
}

ثم أضاف هذا إلى عناصراتي:

 onclick="addClass(this);

لكن هذا أضاف الفصل فقط إلى العنصر الأول في القائمة ، ثم لم يزيل الفصل عند النقر فوق فئة مختلفة.

تبدو عناصر قائمتي هكذا:

     <ul id="circularMenu">

        <a href="#strategy" onclick="addClass(this);"><li id="strategy_link"><h3>Strategy</h3></li></a>
        <a href="#branding"><li id="branding_link" onclick="addClass(this);"><h3>Branding</h3></li></a>
        <a href="#marketing"><li id="marketing_link" onclick="addClass(this);"><h3>Marketing</h3></li></a>
        <a href="#media"><li id="media_link" onclick="addClass(this);"><h3>Media</h3></li></a>
        <a href="#management"> <li id="management_link" onclick="addClass(this);"><h3>Management</h3></li></a>

     </ul>

عند النقر فوق عنصر ، يتغير عنوان URL ، ربما يكون هذا هو السبيل لإعداد الوظيفة لتغيير الفئات حسب عنوان URL؟ أنا جديد جدًا مع JavaScript أي أفكار حول كيفية جعل هذا العمل سيكون موضع تقدير كبير.

الطريقة الحالية التي قمت بترميزها هي تغيير كل عنصر عند التحول ، لكنني أرغب في البقاء حتى يتم النقر على عنصر مختلف. يمكن عرضه هنا: http://perksconsulting.com/dev/capabilties.php العناصر التي أشير إليها هي النقاط السوداء على الجانب الأيسر من الصفحة.

Answer 1

أولاً ، يجب عليك استخدام jQuery addClass() طريقة. لا تحتاج إلى كتابة تطبيقك الخاص (AddClass () الخاص بك هو عربات التي تجرها الدواب ، بالمناسبة).

جرب هذا:

function selectInList(obj)
{
    $("#circularMenu").children("a").removeClass("highlight");
    $(obj).addClass("highlight");
}

ثم:

    <ul id="circularMenu">
        <a href="#strategy" onclick="selectInList(this);"><li id="strategy_link"><h3>Strategy</h3></li></a>
        <a href="#branding"><li id="branding_link" onclick="selectInList(this);"><h3>Branding</h3></li></a>
        <a href="#marketing"><li id="marketing_link" onclick="selectInList(this);"><h3>Marketing</h3></li></a>
        <a href="#media"><li id="media_link" onclick="selectInList(this);"><h3>Media</h3></li></a>
        <a href="#management"> <li id="management_link" onclick="selectInList(this);"><h3>Management</h3></li></a>    
     </ul>

أو حتى أفضل ، حافظ على نظافة HTML ودع jQuery تبسيط الأشياء:

    <ul id="circularMenu">
        <a href="#strategy"><li id="strategy_link"><h3>Strategy</h3></li></a>
        <a href="#branding"><li id="branding_link"><h3>Branding</h3></li></a>
        <a href="#marketing"><li id="marketing_link"><h3>Marketing</h3></li></a>
        <a href="#media"><li id="media_link"><h3>Media</h3></li></a>
        <a href="#management"><li id="management_link"><h3>Management</h3></li></a>
    </ul>

ثم ، في مكان ما في صفحتك:

$(document).ready(function()
{
   $("#circularMenu").children("a").click(function() { selectInList(this) });
});

Answer 2

جرب هذا.

 function addClass(obj)
    {

      $(obj).addClass("Highlight");
    }