Измените цвет активной вкладки (а остальное на обычный) в приложении facebook (fbml) - PullRequest
0 голосов
/ 27 декабря 2010

Я работал весь день, но не смог этого добиться: это очень распространенная форма создания навигационных вкладок.
То, что я пытаюсь сделать, это изменить цвет активной (т.е. выбранной вкладки), сохраняя остальные вкладки в нормальной конфигурации CSS, используя CSS и JavaScript.Я пытаюсь сделать это в приложении Facebook.
Это код JavaScript

<br> function myFunction(element) {<br> var liArray = document.getElementById("menu").childNodes; <br>var i=0; <br>while(liArray[i]) { <br>liArray[i].id=""; <br>i++; }<br> element.id="active";<br> }

, где "активный" - это идентификатор, связанный с "css с изменением цвета" (здесь не показан)
HTML-кодгде приведенный выше сценарий применяется следующим образом.

    <ul id="menu" class = "orange">
        <li onClick="myFunction(this);"><a href="#" clicktoshow="nav1" clicktohide="nav2,nav3">Home</a></li>
        <li onClick="myFunction(this);"><a href="#" clicktoshow="nav2" clicktohide="nav1,nav3">Invite your friends</a></li>
        <li onClick="myFunction(this);"><a href="#" clicktoshow="nav3" clicktohide="nav1,nav2">About</a></li>
    </ul>

Но это не работает.Также не отображаются какие-либо ошибки.Пожалуйста, помогите мне

1 Ответ

1 голос
/ 27 декабря 2010

Не меняйте ID элементов .. не знаю, как это неправильно, но это, конечно, не очень хорошая идея.

Вместо class измените:

function myFunction(element) {
   //get all list items:
   var liArray = document.getElementById("menu").getElementsByTagName("li");

    //make all items inactive
    for (var i = 0; i < liArray.length; i++)
        liArray[i].className = "inactive";

    //make clicked item active:
    element.className = "active";
}

В CSS, где у вас теперь есть что-то вроде #menu #active, измените его на #menu .active

...