Как сделать активным с помощью цвета значок переключения вкладок

Привет, кто-нибудь может мне помочь, как я могу изменить цвет значка в зависимости от того, что я выбираю:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css">
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
.btn-for-device{
  float: left;
  background: transparent;
     
}
</style>
<body>



  <button class = "w3-bar-item w3-button btn-for-device" onclick = "openCity('London')"><i class = "material-icons laptop-icon  w3-orange">laptop</i></button>
  <button class = "w3-bar-item w3-button  btn-for-device " onclick = "openCity('Paris')"><i class = "material-icons laptop-icon ">smartphone</i></button>



<div id = "London" class = "w3-container city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

<div id = "Paris" class = "w3-container city" style = "display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p> 
</div>

<div id = "Tokyo" class = "w3-container city" style = "display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(cityName) {
    var i;
    var x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    document.getElementById(cityName).style.display = "block";  
}
</script>

</body>
</html>

Этот оранжевый фон, который я хочу иметь, когда я нажимаю на телефон, чтобы сделать его оранжевым, а для ноутбука - удалить, в зависимости от того, какой из них активен.

Где вы указываете свойство оранжевого фона?

— 05.06.2018 10:03

Разве вы не можете просто добавить .style.backgroundColor в событие onClick для выбранного элемента?

— 05.06.2018 10:06

Я не знаю, насколько я новичок в программировании

— 05.06.2018 10:15

Знаете ли вы эту особенность SO, с которой вы можете принять любой правильный ответ на свой вопрос? @Lila

— 08.06.2018 21:19

javascript

05.06.2018 09:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 2

Простой. просто обновите свою функцию, чтобы использовать this (который будет относиться к вашей кнопке) в качестве параметра и используйте это, чтобы изменить цвет фона, удаляя его с каждой другой кнопки: Вот пример:

function openCity (button, cityName) {
    
    var i;
    var x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    document.getElementById(cityName).style.display = "block";
    
    //remove orange background from every button
    var buttons = document.getElementsByClassName ('w3-button')
    
    for (var j = 0; j < buttons.length; j++) {
      
      //find <i> tag of current button (always the first one -> [0])
      var i_tag = buttons[j].getElementsByTagName('i')[0];
      
      //remove class 'w3-orange' (background)
      i_tag.classList.remove ("w3-orange");
    
    }
    
    //find first <i> tag of clicked button (parameter 'button' of this function)
    var i_tag = button.getElementsByTagName('i')[0];
    
    //set orange background for selected buttons <i> tag
    i_tag.classList.add ("w3-orange");
    
}

.btn-for-device{
  float: left;
  background: transparent;
     
}

<link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css">
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">

<button class = "w3-bar-item w3-button btn-for-device" onclick = "openCity(this, 'London')"><i class = "material-icons laptop-icon w3-orange">laptop</i></button>
<button class = "w3-bar-item w3-button  btn-for-device " onclick = "openCity(this, 'Paris')"><i class = "material-icons laptop-icon ">smartphone</i></button>
  
<div id = "London" class = "w3-container city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

<div id = "Paris" class = "w3-container city" style = "display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p> 
</div>

<div id = "Tokyo" class = "w3-container city" style = "display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

05.06.2018 10:23

Вы должны заменить класс w3-orange на активный значок независимо от того, какой метод вы используете.

Ниже приведен один из примеров, но не единственный способ сделать это.

Вы можете попытаться выяснить, каким способом вы хотите воспользоваться.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css">
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
.btn-for-device{
  float: left;
  background: transparent;
     
}
</style>
<body>



  <button class = "w3-bar-item w3-button btn-for-device" onclick = "openCity('London')"><i class = "material-icons laptop-icon w3-orange" id = "icon-London">laptop</i></button>
  <button class = "w3-bar-item w3-button  btn-for-device " onclick = "openCity('Paris')"><i class = "material-icons laptop-icon" id = "icon-Paris">smartphone</i></button>



<div id = "London" class = "w3-container city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

<div id = "Paris" class = "w3-container city" style = "display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p> 
</div>

<div id = "Tokyo" class = "w3-container city" style = "display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(cityName) {
    var i;
    
    var x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    var y = document.getElementsByClassName("laptop-icon");
    for (i = 0; i < y.length; i++) {
       y[i].classList.remove('w3-orange'); 
    }
    var z = document.getElementById('icon-'+cityName);
    z.classList.add('w3-orange'); 
    
    document.getElementById(cityName).style.display = "block";
}
</script>

</body>
</html>

05.06.2018 10:23

Другие вопросы по теме

Реагировать на обновление отключенного компонента

CodeIgniter - сохранение значения из полей ввода, динамически добавляемого в форму в таблицу MySQL

Лучший способ достичь желаемых результатов для следующего кода

Черное пространство после окончания HTML

Проблема с анимацией текста css

Транспортир, невозможно получить элемент с помощью element (by.css)

Создать контроллер с помощью службы - Get ... не является функцией

Как включить или отключить кнопку, пока пользователь набирает текст в Vue Ui-select

Экспорт мест из API Google Maps в файл

Необходимо изменить код javascript

Как сделать активным с помощью цвета значок переключения вкладок

Ответы 2

Другие вопросы по теме

Похожие вопросы