<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Справочник Android</title> <link rel="stylesheet" type="text/css" href="AndroidHelp.css"> </head> <body> <div id="left"> <ul> <li><a target="question" href="HTML\1.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\2.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\3.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\4.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\5.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\6.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\7.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\8.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\9.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\10.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\11.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\12.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\13.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\14.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\15.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\16.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\17.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\18.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\19.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\20.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\21.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\22.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\23.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\24.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\25.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\26.html">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\27.html">Прослушка Радиостанции</a></li> </ul> </div> <iframe name="question" id="iframe"></iframe> </body> </html>

I want to change the color of the button. To change it is necessary to prescribe class = "active"

but how to do it programmatically? since my site works without updating the entire page.

Using iFrame .... Is there a way?

  • Yes, there is a way - JavaScript - Aleks G
  • It is possible and with the help of CSS to add the appropriate design. This is an alternative to javascript. - Evgeniy Miroshnichenko

3 answers 3

You can add using js. Only the last line where the comment is written remove then.

 var questionLinks = $('a'); $('a').click(function(e) { $.each(questionLinks, function(index, link) { $(link).removeClass('active'); }) $(this).addClass('active'); e.preventDefault(); // Убрать, чтобы ссылка работала }) 
 .active { color: #ff0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="left"> <ul> <li><a target="question" href="HTML\1.html">Прослушка Радиостанции</a> </li> <li><a target="question" href="HTML\2.html">Прослушка Радиостанции</a> </li> <li><a target="question" href="HTML\3.html">Прослушка Радиостанции</a> </li> <li><a target="question" href="HTML\4.html">Прослушка Радиостанции</a> </li> <li><a target="question" href="HTML\5.html">Прослушка Радиостанции</a> </li> </ul> </div> <iframe name="question" id="iframe"></iframe>

If the active class is optional, it is better to write the styles:

 a:focus { color: #ff0; } 
 <div id="left"> <ul> <li><a target="question" href="#">Прослушка Радиостанции</a> </li> <li><a target="question" href="#">Прослушка Радиостанции</a> </li> <li><a target="question" href="#">Прослушка Радиостанции</a> </li> <li><a target="question" href="#">Прослушка Радиостанции</a> </li> <li><a target="question" href="#">Прослушка Радиостанции</a> </li> </ul> </div> <iframe name="question" id="iframe"></iframe> 

     var removeClass = function (){ var links = document.getElementsByTagName('a'); for(var i = 0; i< links.length; i++){ links[i].classList.remove('active'); } } 
     .active { text-align: center; color: green; } 
     <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Справочник Android</title> <link rel="stylesheet" type="text/css" href="AndroidHelp.css"> </head> <body> <div id="left"> <ul> <li><a target="question" href="HTML\1.html" onclick="removeClass(); this.classList.add('active')">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\2.html" onclick="removeClass(); this.classList.add('active')">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\3.html" onclick="removeClass(); this.classList.add('active')">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\4.html" onclick="removeClass(); this.classList.add('active')">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\5.html" onclick="removeClass(); this.classList.add('active')">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\6.html" onclick="removeClass(); this.classList.add('active')">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\7.html" onclick="removeClass(); this.classList.add('active')">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\8.html" onclick="removeClass(); this.classList.add('active')">Прослушка Радиостанции</a></li> <li><a target="question" href="HTML\9.html" onclick="removeClass(); this.classList.add('active')">Прослушка Радиостанции</a></li> </ul> </div> <iframe name="question" id="iframe"></iframe> </body> </html>

    I hope this code will come down

      Option without jQuery:

       //декларируем коллекцию элементов var my_elems = document.getElementsByClassName("radio-station"); // обработчик клика для элементов из коллекции function add_class_active (event) { for(var i=0; i < my_elems.length; i++) { my_elems[i].classList.remove("active"); } event.target.className += " active"; } // привязка событий к элементам колекции function init() { for(var i=0; i < my_elems.length; i++) { my_elems[i].onclick = add_class_active; } } // запуск init(); 
       .active { background-color: green; } .radio-station { text-decoration: none; } 
       <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Справочник Android</title> <link rel="stylesheet" type="text/css" href="AndroidHelp.css"> </head> <body> <div id="left"> <ul id = "stations"> <li><a class="radio-station active" target="question" href="HTML\1.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\2.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\3.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\4.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\5.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\6.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\7.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\8.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\9.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\10.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\11.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\12.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\13.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\14.html">Прослушка Радиостанции</a></li> <li><a class = "radio-station" target="question" href="HTML\15.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\16.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\17.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\18.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\19.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\20.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\21.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\22.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\23.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\24.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\25.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\26.html">Прослушка Радиостанции</a></li> <li><a class="radio-station" target="question" href="HTML\27.html">Прослушка Радиостанции</a></li> </ul> </div> </body> </html>