ナビゲーションは一度、しかしその後何もしません

Question

私は4つの要素でナビゲーションバーをコーディングしようとしています。要素が現在選択されている場合は、 "赤"の背景イメージを持ち、他の3つの場合は "黒"の背景イメージを持ちます。最後に、私のHTMLはこれを持っている

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 { 

    } 
} 

：私の4つのタブが、私はその後、8つの2

以下

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

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

などの機能や、このような4つのブロックを作ってみました「時刻表、宿題、通知やスポーツ」 です：

<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> 

これは何もしません。どうして？

Answer 1

私が思うに、エラーは、スクリプトの中でほんの一例である

（少なくともあなたはここに掲載のコードでは、あなたのHTMLのid「時間」とは要素が存在しない）しなければならない

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

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

もう1つのことは、一度動作すれば、新しいセッションまたは既存のセッションでいくつかの問題を保存するかもしれないようです。私はjavascriptの専門家ではない。しかし、それが助けられたら、お知らせください。

Answer 2

背景色をオフにすると、あなたがこのような既存のクラスを削除する必要があります。

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'クラスを使用します。アクティブなクラスはアクティブなリンクに適用されるので、何度も関数を書く必要はありません。お役に立てれば。