Question

注意：我没有写过所有的网页代码，所以我不确定pdiv是什么，我只是想尝试一下，如果我可以改变这个小问题[想要单击时更改文本颜色以指示您正在阅读的部分

该部分是这样的：

然后当您点击它时会显示所有菜单部分：

＆＃13;

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
}

＆＃13;

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

＆＃13;

无论如何只使用css来制作它？或者如果它必须是java你能帮帮我吗？感谢

Answer 1

在我看来，我认为如果您尝试拨打按钮

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

该功能必须选择相同的按钮

查看您正在寻找ID为

的元素的函数

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

你需要在这一行中看到相同的ID：

document.getElementById('country_menu_report_name\')

或 $ menutext。=＆＃34;＆＃34;。$ thispol。＆＃34; \ n＆＃34;;

并查看＆＃34; pvid＆＃34;在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)

Answer 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');
}

Answer 3

您实际上可以将“this”传递给您的事件，这将直接访问与之交互的元素。这是一个低技术版本（如其他人所说，你应该使用css类来打包div的不同状态）。

注意标题div中的onclick="changeColor(this)"。另外，我将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>

单击元素时如何更改文本颜色

3 个答案: