0

クリックされたものに応じて、一連の 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私が参照している項目は、ページの左側にある黒い点です。

4

2 に答える 2

3

まず、jQueryaddClass()メソッドを使用する必要があります。独自に記述する必要はありません (ちなみに、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) });
});
于 2010-05-12T18:37:05.363 に答える
-1

これを試してみてください。

 function addClass(obj)
    {

      $(obj).addClass("Highlight");
    }
于 2010-05-12T18:37:17.420 に答える