導航工作一次，但然後沒有什麼

我試圖用四個元素編碼導航欄。如果該元素當前被選中，則它將具有「紅色」背景圖像，如果它是其他3個背景圖像之一，則將具有「黑色」背景圖像。我的四個選項卡的「時間表，作業，通知和運動」我試圖使8個的功能類似於2以下導航工作一次，但然後沒有什麼

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

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

然後四塊這樣的：

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>

它工作一次，然後什麼都不做。爲什麼？

來源

2012-04-09 user1321539

你可以做一個（可能）工作的這個可訪問的例子嗎？這可以緩解發現很多問題。 – JanD 2012-04-09 11:14:51

我認爲錯誤是在你的腳本，只是一個例子

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

應（有在你的HTML ID「時間」沒有元素，至少在你這裏張貼的代碼）

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

另一件事，如果它工作一次，那麼似乎它可以節省新會話或現有會話的一些問題。我不是JavaScript的專家。但如果有幫助，請通知。

來源

2012-04-09 10:19:02

轉彎時的背景顏色了，你需要刪除這樣的任何現有類：

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

由於您使用的類，而不是修改的JavaScript的樣式，你應該堅持這一點。你似乎試圖在JavaScript中設置背景圖像。相反，您應該將該背景圖像應用於CSS中類的樣式。

使用像jQuery這樣的框架會使它更容易，因爲它具有諸如addClass（），toggleClass（）和removeClass（）之類的輔助函數。你還應該在'li'裏面設置'a'標籤。它使我認爲更清晰的代碼。瀏覽器仍會讀取點擊並能夠正確應用這些類。

此外，您不應該在代碼中經常重複自己。一種解決方案是創建一個通用函數，並將該元素的ID作爲參數傳遞。然後，您使用'主動'類而不是'timetable_r'。活動類將應用於活動鏈接，您不必多次編寫函數。希望這可以幫助。

來源

2012-04-09 13:17:47

導航工作一次，但然後沒有什麼

回答

相關問題