Изменить цвет фона на якоре в списке при нажатии

У меня есть меню, построенное ul li с привязными тегами в каждом. Css применяется к якорю и привязке: наведите курсор, однако я хочу, чтобы выбранный элемент показывал, что он выбран, чтобы изменить фон другого цвета. anchor: активный не работает.Изменить цвет фона на якоре в списке при нажатии

Я пытаюсь javascript, но еще не успешно. Может ли это быть сделано через css? Я рассмотрел так много примеров, но никто на самом деле не работал правильно.

JAVASCRIPT

<script type="text/javascript"> 
     function ChangeColor(obj) { 
     var li = document.getElementById(obj.id); 
     li.style.background = "#bfcbd6"; 
     } 
</script>

HTML

<div id="navigation"> 
     <ul> 
      <li><a onclick="changecolor(this);" href="Default.aspx">Home</a></li> 
      <li><a onclick="changecolor(this);" href="View.aspx">View</a></li> 
      <li><a onclick="changecolor(this);" href="About.aspx">About</a></li> 
     </ul> 
    </div>

CSS - упрощенный

#navigation ul { 
    list-style-type: none; 
} 

#navigation li 
{ 
    float: left; 
} 

#navigation a 
{ 
    background-color: #465c71; 
} 

#navigation a:hover 
{ 
    background-color: #bfcbd6; 
}

источник

2012-10-17 TroyS

вам не нужно, чтобы получить идентификатор снова для обработки элемента. obj ссылается на фактический элемент.

<script type="text/javascript"> 
     function ChangeColor(obj) { 
     obj.style.backgroundColor = "#bfcbd6"; 
     } 
</script>

Edit: И javaScript is case sensitive, так что вы должны проверить ваши имена функций.

Here is a jsFiddle Demo

источник

2012-10-17 18:22:31 ocanal

@acanal Действительно, что делает делает работу сейчас, спасибо, но это возвращается к основному цвету, установленному в CSS #navigation a. Ты знаешь почему? – TroyS

Если ваша страница изменяется, когда вы нажимаете ссылки, то ваша страница будет полностью изменяться на значение по умолчанию. это нормально. вы не можете сделать это с помощью javascript. вы должны сделать это на стороне сервера. например Кнопка «Домой» должна быть установлена как активная кнопка в Default.aspx. – ocanal

@acanal ok, вот что я сделаю спасибо. – TroyS

Я нашел способ использовать JavaScript, чтобы решить эту ситуацию. Это работает для MasterPage. Изменение идентификатора выбранной вкладки будет ссылаться на css для выбранной вкладки только при установке идентификатора других вкладок в значение null.

HTML

<div id="navbar"> 
    <div id="holder"> 
     <ul id="menulist"> 
      <li><a onclick="SelectedTab(this);" href="#" id="onlink" >Home</a></li> 
      <li><a onclick="SelectedTab(this);" href="#" id="" >Products</a></li> 
      <li><a onclick="SelectedTab(this);" href="#" id="">Services</a></li> 
      <li><a onclick="SelectedTab(this);" href="#" id="">Gallery</a></li> 
      <li><a onclick="SelectedTab(this);" href="#" id="" >Contact</a></li> 
     </ul> 
    </div> 
</div>

JavaScript

function SelectedTab(sender) { 
     var aElements = sender.parentNode.parentNode.getElementsByTagName("a");  
     var aElementsLength = aElements.length;  
     var index;  
     for (var i = 0; i < aElementsLength; i++)  
     { 
      if (aElements[i] == sender) //this condition is never true   
      { 
       index = i; 
       aElements[i].id="onlink" 
      } else { 
       aElements[i].id="" 
      } 
     } 
    }

Css для изменения цвета фона после вкладка была выбрана

#holder ul li a#onlink 
{ 
    background: #FFF; 
    color: #000; 
    border-bottom: 1px solid #FFF; 
}

источник

2012-10-18 18:45:52 TroyS

Изменить цвет фона на якоре в списке при нажатии

ответ

Смежные вопросы