как изменить цвет текста при нажатии на элемент

Примечание: Я не написал весь код веб-страницы,поэтому я не уверен в том, что pdivэто, я просто хочу попробовать, если я могу изменить эту небольшую проблему [хочу сделать изменение цвета текста при нажатии, чтобы указать, какой раздел Вы читаете]

Раздел похож на этот:

Введите описание изображения здесь

и затем, когда вы нажмете на него будет отображаться весь раздел меню:

Введите описание изображения здесь

function menuShowPol(pdiv){
	
    if(document.getElementById('menu_pol_div'+pdiv).
                                      style.display=="none") { 
		    document.getElementById('menu_pol_div'+pdiv)
                            .style.display = "inline-block";
		} else {
		    document.getElementById('menu_pol_div'+pdiv)
                                    .style.display = "none";
		}		
}
function changeColor(pdiv){
	{
  			document.getElementById('menu_pol_div'+pdiv)
                        .style.color = "#ff0000"; // forecolor
  			document.getElementById('menu_pol_div'+pdiv)
               .style.backgroundColor = "#ff0000"; // backcolor
}

    
 if($showpol==1){
  $menutext .= "<div id="country_menu_report_name"
                      onclick="menuShowPol('".$pol."');
                      changeColor('".$pol."'); return 
                                false;">".$thispol."</div>n";

есть ли в любом случае, чтобы сделать это с помощью только css?
или если это должна быть java, вы можете мне помочь? спасибо

3 ответа

  1. На мой взгляд, я думаю
    При попытке вызова кнопки

    $menutext .= "<div id=\"country_menu_report_name\" onclick=\"menuShowPol('".$pol."');changeColor('".$pol."'); return false;\">".$thispol."</div>\n";
    

    Функция должна подобрать такую же кнопку

    Посмотрите на функцию, которая ищет элемент с идентификатором:

    document.getElementById('menu_pol_div'+pdiv).style.display = "inline-block";
    

    Вам нужно посмотреть же id в этой строке:

    document.getElementById('country_menu_report_name\')
    

    или
    $menutext .= «».$thispol.»\северный»;

    и посмотрите «pvid» в ID: пример

    для

    $menutext .= "<div id=\"country_menu_report_name\" onclick=\"menuShowPol('".$pol."');changeColor('".$pol."'); return false;\">".$thispol."</div>\n";
    

    вы можете использовать:

    pvid = "report_name\"
    document.getElementById('country_menu_'+pvid)
    
  2. У меня было бы два css класса:

    .read{
       color: red;
    }
    
    .unread {
       color: blue;
    }
    

    Тогда, я бы сделал что-то вроде этого:

    function changeColor(pdiv){
        //get all divs and remove read class.
        var divs = document.getElementsByClassName('read');
        for(var div in divs){
            div.classList.remove('read');
        }
        //add read class to current div.
        pdiv.classList.add('read');
    }
    
  3. вы можете фактически передать» это » вашим событиям, которые дадут доступ непосредственно к элементу, с которым взаимодействовали. Вот низкотехнологичная версия (как говорят другие, вы должны использовать CSS классы для упаковки различных состояний вашего divs).

    заметьте onclick="changeColor(this)"в заголовке divs. кроме того, я связал country_menu_report_X с menu_pol_X, что не является лучшей практикой, но эй, это работает, и это ваниль.

    function changeColor(pdiv){
       var myid = pdiv.id;
       var otherid = myid.replace("country_menu_report_", "menu_pol_");
       var otherdiv = document.getElementById(otherid);
       var toggle = otherdiv.style.display == "none";
       if(!toggle){
           pdiv.style.color = "#0000ff"; // forecolor
           pdiv.style.backgroundColor = "#ccccff"; // backcolor
          otherdiv.style.display = "none";
       }else{
           pdiv.style.color = "#000000"; // forecolor
           pdiv.style.backgroundColor = "#aaeeaa"; // backcolor
           otherdiv.style.backgroundColor = "#ccffcc"; // backcolor
           otherdiv.style.display = "block";
       }
    }
    <div id="country_menu_report_a" onclick="changeColor(this)" style="user-select:none; cursor:pointer; color:#0000ff; background-color:#ccccff;" >test div A. click me</div>
    <div id="menu_pol_a"style="display:none" >menu item A</div>
    <div id="country_menu_report_b" onclick="changeColor(this)" style="user-select:none; cursor:pointer; color:#0000ff; background-color:#ccccff;" >test div B. click me</div>
    <div id="menu_pol_b" style="display:none" >menu item B</div>