⑴ 求一个javascript功能，实现点击过的菜单变色。
建议用jquery库实现.
具体是4个菜单的母容器设ID=mother,4个菜单分别在一个li里如下
<ul id="mother">
<li onclick="changeClass(this)";></li>
</ul>
function changeClass(a)
{
$("#mother").children("li").removeClass("被点击的菜单的CSS类");
$(a).addClass("被点击的菜单的CSS类");
}
如果不用jquery会比较麻烦但是也可以写
function changeClass(a)
{
document.getElementById("mother").getElementsByTagName("li").className="未被点击的CSS类";
a.className="被点击菜单的CSS类";
}
我也忘了是不是className了,你跟踪一下看看有问题也是大小写的问题.但jquery的方法应该是没错的.
像你图片里的菜单html应该差不多这么写
<div id="mother">
<div class="menu">
<span>硬件产品<span>
<ul>
<li onclick="changeClass(this)";>终端产品</li>
<li onclick="changeClass(this)";>软件产品</li>
</ul>
</div>
</div>
css这方面的问题在写就多了,你估计看着也烦。具体就是也写background，text-alain 和float的问题。应该不难写。
ps:你这不叫单击过的菜单变色.二是当前选中的菜单变色.谢谢
⑵ js实现点击一个按钮，表格中某行变色，按钮的value与表格中列name值相同的行变色
<table>
<tr id="r1">
<td name="r1c1"><input id="button" type="button" value="r1" onClick="changeColor(this)"/></td>
</tr>
<tr id="r2">
<td name="r2c1"><input id="button" type="button" value="r2" onClick="changeColor(this)"/></td>
</tr>
</table>
<script>
function changeColor(obj){
var tri = obj.value;
document.getElementById(tri).style.backgroundColor = 'red';
}
</script>
不通的话自己调一下，盲写的。
⑶ JS 点击改变颜色
document.getElementById(id).style.color = '颜色值';
你的只是点到style这里，你要再点到color这里才行。
⑷ js鼠标点击变颜色
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<divonclick="cbg()"style="width:200px;height:200px;border:1pxsolidred;">
<ahref=""id="tr">a</a>
<ahref="">b</a>
</div>
</body>
<script>
functioncbg(){
document.getElementById('tr').style.backgroundColor="#222";
}
</script>
</html>
⑸ JS点击变色的问题
$(document).ready(function onClickColor(td) {
if (td.style.backgroundColor != '')
{
td.style.backgroundColor = '';
td.style.color = '';
}
else
{
td.style.backgroundColor = '#FFFF99';
td.style.color = '#0600FF';
}
});
<table class="sortable" onclick="onClickColor(this);" style="cursor:move">
⑹ js实现变色，表格中的数据在查看时，显示为红色，当点击过该条数据后，数据的颜色由红色变黑色
为什么要用js呢，这个完全可以用a 标签的css属性来完成的呀。
以下为css代码
a{ } 默认的值
a:link {} /* 未访问的链接 */
a:visited {} /* 已访问的链接 */
a:hover {} /* 当有鼠标悬停在链接上 */
a:active {} /* 被选择的链接 */
⑺ js点击变色
直接在google浏览器的审查元素的console试试。
⑻ 求用JS或jquery实现点击表格同步变色
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
.tab1,
.tab2{
border-collapse:collapse;
border:none;
width:200px;
}
.tab1td,
.tab2td{
border:1pxsolid#000;
text-align:center;
}
.tab1td{
cursor:pointer;
}
.tab2{
margin-left:40px;
}
.bg1{
background:red;
}
.bg2{
background:green;
}
.bg3{
background:orange;
}
</style>
</head>
<body>
<menu>
<table>
<tr>
<td>01</td>
<td>11</td>
<td>12</td>
<td>22</td>
<td>23</td>
<td>33</td>
</tr>
</table>
</menu>
<hr>
<table>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>33</td>
</tr>
<tr>
<td>01</td>
<td>11</td>
<td>12</td>
<td>22</td>
<td>23</td>
<td>33</td>
</tr>
</table>
<script>
;(function(){
varaBtn=document.querySelectorAll('.tab1td');
varaConTd=document.querySelectorAll('.tab2td');
~function(){
for(vari=0;i<aConTd.length;i++){
aConTd[i].dataset.cls=aConTd[i].className;
}
}();
functionremoveConTdBg(text){
for(vari=0;i<aConTd.length;i++){
if(aConTd[i].innerText===text){
aConTd[i].classList.remove(aConTd[i].dataset.cls);
}
}
}
functionaddConTdBg(text){
for(vari=0;i<aConTd.length;i++){
if(aConTd[i].innerText===text){
aConTd[i].classList.add(aConTd[i].dataset.cls);
}
}
}
for(vari=0;i<aBtn.length;i++){
aBtn[i].bSign=true;
aBtn[i].strClass=aBtn[i].className;
aBtn[i].onclick=function(){
if(this.bSign){
//去掉class，和判断相应的td
this.classList.remove(this.strClass);
removeConTdBg(this.innerText);
}else{
//加上class
this.classList.add(this.strClass);
addConTdBg(this.innerText);
}
this.bSign=!this.bSign;
};
aBtn[i].onmousedown=function(){
returnfalse;
};
}
})()
</script>
</body>
</html>
注意：里面用到了很多h5的新语法，所以低版本的浏览器不兼容，请自行更改。
⑼ 如何用js实现点击按钮改变表格中的一个单元格的背景颜色
<script language="javascript" type="text/javascript">
function chgbg(id){
var obj=window.document.getElementById(id);
var bg=obj.style.backgroundColor;
if(bg=='') obj.style.backgroundColor='#f00'
else obj.style.backgroundColor=''
}
</script>
<table width="100%" border="1" cellspacing="0" cellpadding="4">
<tr>
<td id="td1"> </td>
<td id="td2"> </td>
<td id="td3"> </td>
</tr>
<tr>
<td id="td4"> </td>
<td id="td5"> </td>
<td id="td6"> </td>
</tr>
</table>
<input type="button" value="点击改变指定单元格回背景答" onClick="chgbg('td1');" />
⑽ Javascript如何实现点击过的文字背景变色
<aid="word"href="#">点击变色来</a>
var a = document.getElementById("word");
a.onClick = function (){
this.style.color = /*希望源字体改变的颜色值*/;
return false; //阻止页面跳转;
}