Помогите достать элемент (javascript)

222

29 июля 2017, 07:24

Помогите, пожалуйста, никак не могу достать элемент. Для выделения одной кнопки другим цветом, крашу все в старый синий, а выбранную в тёмный. Проблема в том, что некоторые элементы навигации имеют внутри себя подменю. И их теги "<a>" тоже красятся в цвет меню (синий), а они были голубыми.

Кажется, что проблема в массиве. Объясните, что я делаю не так.

Понимаю, что говнокод, но я только учусь. Тег "<a>" из меню и подменю желательно не убирать. Подскажите какое-нибудь решение, потому что моя задумка, похоже, неадекватна сама по себе.

//Поменять цвет у выбранной вкладки 
function  changeButtonColor(x) { 
     
    //получить меню 
    var menu=document.getElementsByClassName("vmenu"); 
    //достать из меню все <a> 
    var allBu=menu[0].getElementsByTagName("a"); 
     
    //перекрасить их всех под цвет меню 
    for(i=0; i<allBu.length; i++){ 
        
        allBu[i].style.backgroundColor="#1378ba"; 
    } 
    //выбранную вкладку покрасить в цвет темнее 
    x.style.backgroundColor="#195394"; 
 
    //достать <a> в подменю и снова покрасить их в голубой 
        var subLists = menu[0].getElementsByTagName("ul"); 
        var list = []; 
        for (i = 0; i < subLists.length; i++) { 
            list.push(subLists[i].getElementsByTagName("a")); 
        } 
        for (i = 0; i < list.length; i++) { 
            list[i].backgroundColor = "#195394"; 
 
        } 
}

<ul class="vmenu"> 
  <li id="information"><a onclick="changeButtonColor(this)">Общая информация по API</a></li> 
  <li><a onclick="changeButtonColor(this)"><span>Пользователи системы</span></a> 
      <ul class="dropdown"> 
      <li id="login" ><a><span>Авторизация</span></a></li> 
      <li id="logout"><a ><span>Выход</span></a></li> 
      <li id="logoutGlobal"><a><span>Глобальный выход</span></a></li> 
      </ul>   
  </li> 
  <li><a onclick="changeButtonColor(this)"><span>Объекты систем</span></a> 
      <ul class="dropdown"> 
      <li id="objects" ><a ><span>Доступные объекты</span></a></li> 
      <li id="get"><a><span>Получение информации</span></a></li> 
      </ul> 
  </li> 
  <li><a onclick="changeButtonColor(this)"><span>Модемы системы</span></a> 
        <ul class="dropdown"> 
            <li id="modems" ><a><span>Список модемов</span></a></li> 
        </ul> 
  </li> 
    <li><a onclick="changeButtonColor(this)"><span>Приборы учета</span></a> 
        <ul class="dropdown"> 
            <li id="devices" ><a><span>Список приборов</span></a></li> 
        </ul> 
    </li>