Изменение класса элемента с использованием getElementById

Question

У меня есть структура меню, как это:

<ul> 
 
    <li> 
 
    <h3>pageA</h3> 
 
    <ul> 
 
     <li id="a1"><a href="index.php?pageA&id=1">1</a> 
 
     </li> 
 
     <li id="a2"><a href="index.php?pageA&id=2">2</a> 
 
     </li> 
 
     <li id="a3"><a href="index.php?pageA&id=3">3</a> 
 
     </li> 
 
     <li id="a4"><a href="index.php?pageA&id=4">4</a> 
 
     </li> 
 
     <li id="a5"><a href="index.php?pageA&id=5">5</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <h3>pageB</h3> 
 
    <ul> 
 
     <li id="b1"><a href="index.php?pageB&id=1">1</a> 
 
     </li> 
 
     <li id="b2"><a href="index.php?pageB&id=2">2</a> 
 
     </li> 
 
     <li id="b3"><a href="index.php?pageB&id=3">3</a> 
 
     </li> 
 
     <li id="b4"><a href="index.php?pageB&id=4">4</a> 
 
     </li> 
 
     <li id="b5"><a href="index.php?pageB&id=5">5</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

И я хочу, чтобы изменить <li> классы с JavaScript. Я могу изменить ребенка <li> со следующим кодом. Но я не могу изменить класс родителя <li>.

document.getElementById("a1").className = 'active';

Answer 1

Ваше решение должно работать, чтобы заменить класс элемента с этим идентификатором.

Заканчивать эту страницу: http://www.w3schools.com/jsref/prop_html_classname.asp

Пример Перезапись имя существующего класса с новым:

<div id="myDIV" class="mystyle">I am a DIV element</div> 

document.getElementById("myDIV").className = "newClassName"; 

Пример Чтобы добавить класс к элементу, без перезаписи существующие значения, введите пробел и новое имя класса:

document.getElementById("myDIV").className += " anotherClass";