1

4 つの要素を持つナビゲーション バーをコーディングしようとしています。要素が現在選択されている場合は「赤」の背景画像が表示され、他の 3 つの要素のいずれかである場合は「黒」の背景画像が表示されます。私の4つのタブは「時刻表、宿題、通知、スポーツ」です下の2つのような8つの機能を作ってみました

function setTimeRed() 
{
    document.getElementById("time").style.ClassName = 'timetable_r';
}

function setTimeBlack() 
{
    document.getElementById("time").style.ClassName = 'time_r';
}

そして、次のような 4 つのブロック:

function changeTimeButton()
{
    var timePath = new String();
    timePath = document.getElementById("timetable").style.backgroundImage;

    if(timePath == "url(assets/img/tabs/time_black.png)" || timePath == "")
    {
        setTimeRed();
        setHomeBlack();
        setNotiBlack();
        setSportBlack();
    }
    else {

    }  
}

最後に、私のhtmlにはこれがあります：

<div id="tabbar">
            <ul id="tabs">

                <a href"#" onclick="changeTimeButton()">
                    <li id="timetable" class="time_b">
                        <p>Timetable</p>
                    </li>
                </a>

                <a href"#" onclick="changeHomeButton()">
                    <li id="homework" class="home_b">
                        <p>Homework</p>
                    </li>
                </a>

                <a href"#" onclick="changeNotiButton()">
                    <li id="notifications" class="noti_b">
                        <p>Notifications</p>
                    </li>
                </a>

                <a href"#" onclick="changeSportButton()">
                    <li id="sport"  class="sport_b">
                        <p>Sport</p>
                    </li>
                </a>

            </ul>

        </div>

それは一度動作し、その後何もしません。なんで？

4

2 に答える 2

1

背景色をオフにするときは、次のように既存のクラスをすべて削除する必要があります。

document.getElementById("timetable").className = 
document.getElementById("timetable").className.replace
( /(?:^|\s)time_b(?!\S)/ , '' )

JavaScript でスタイルを変更する代わりにクラスを使用しているので、それに固執する必要があります。JavaScriptで背景画像を設定しようとしているようです。代わりに、その背景画像を CSS のクラスのスタイルに適用する必要があります。

jQuery のようなフレームワークを使用すると、addClass()、toggleClass()、および removeClass() などのヘルパー関数があるため、これがはるかに簡単になります。また、「li」内に「a」タグを設定する必要があります。私の意見では、それはよりクリーンなコードになります。ブラウザは引き続きクリックを読み取り、クラスを正しく適用できます。

また、コード内で頻繁に繰り返す必要はありません。1 つの解決策は、汎用関数を作成し、要素の ID をパラメーターとして渡すことです。次に、「timetable_r」の代わりに「active」クラスを使用します。アクティブなクラスはアクティブなリンクに適用されるため、関数を何度も書き出す必要はありません。お役に立てれば。

于 2012-04-09T13:17:47.127 に答える
1

スクリプトにエラーがあると思いますが、ほんの一例です

document.getElementById("time").style.ClassName = 'timetable_r';

あるべきです（少なくともここに投稿したコードでは、HTMLに「時間」というIDを持つ要素はありません）

document.getElementById("timetable").style.ClassName = 'timetable_r';

もう1つ、一度機能すると、新しいセッションまたは既存のセッションでいくつかの問題が解決される可能性があります。私は JavaScript の専門家ではありません。しかし、それが役立つ場合は、お知らせください。

于 2012-04-09T10:19:02.780 に答える