SexInSex! Board » 电脑问题应用交流区 » 求javascript添加一句改颜色

查看完整版本: 求javascript添加一句改颜色

sttstt 2013-2-9 15:26

求javascript添加一句改颜色

[url]http://www.webdm.cn/webcode/7bbe6483-3ad7-438a-bc0d-8571bcc9078f.html[/url]
此文章介绍了一个简短代码, 实现了faq系统, 也就是点击一个问题则该问题的答案被展开, 并将其他答案收缩.

求高手给添加一两句, 使得点击一个问题时, 该问题(不是答案)的颜色变红, 区别于其他问题, 之前变红的其他问题颜色也变回黑色.

8714147 2013-2-9 18:08

<html>
<head>
<title>Demo</title>
<script language="javascript">
function resetColor(){
  var src = document.getElementById("src");
  var desc = document.getElementById("desc");
  if( !desc ){
return;
  }
  var value = src.value.toLocaleLowerCase()
  var availableColor = ["red","blue","green"];
  for(var i=0; i<availableColor.length; i++){
if(availableColor[i].toLocaleLowerCase()
      == value){
   desc.style.color=value;
}
  }
}
</script>
</head>
<body onload="resetColor()">
<input id="src" type="text" value="red" onkeyup="resetColor()"><br>
<div id="desc"> Hello World! </div>
</body>
</html>

sttstt 2013-2-14 08:14

谢谢, 不过这个代码好像无关, 有没有其他的?

newimage 2013-2-14 09:19

这个你可以通过控制CSS样式实现，你可以定义一个层，设定它的4个点击参数的颜色，则可实现你所说的颜色变动

auian98 2013-2-14 14:26

这个原来的代码写得比较乱，我添加了三句可以实现你要的功能。但是更建议你自己理解原理，或者用jQuery等更方便。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript实现简单的FAQ页面的折叠效果 - [url]www.webdm.cn[/url]</title>
<script type="text/javascript">
var lastFaqClick=null;//上次点击的faq
window.onload=function(){
  var faq=document.getElementById("faq");
  var dls=faq.getElementsByTagName("dl");
  for (var i=0,dl;dl=dls[i];i++){
var dt=dl.getElementsByTagName("dt")[0];//取得标题
   dt.id = "faq_dt_"+(Math.random()*100);
   dt.onclick=function(){
   var p=this.parentNode;//取得父节点
      if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
      var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
      for (var i=0,dd;dd=dds[i];i++)
         dd.style.display='none';
lastFaqClick.style.color='black';//------------------new
      }
     this.style.color='black';//------------------new
      lastFaqClick=this;
      var dds=p.getElementsByTagName("dd");//取得该父节点所有的子节点，也就是所有的答案
      var tmpDisplay='none';
   if (gs(dds[0],'display')=='none'){
      tmpDisplay='block';
   this.style.color='red';//------------------new
   }
      for (var i=0;i<dds.length;i++)
      dds[i].style.display=tmpDisplay;
   }
  }
}
/**
*取得元素的真实css属性
*written in 06.7 sheneyan
*/
function gs(d,a){
  if (d.currentStyle){
var curVal=d.currentStyle[a]
  }else{
var curVal=document.defaultView.getComputedStyle(d, null)[a]
  }
  return curVal;
}
</script>
<style type="text/css">
*,html,body{margin:0;padding:0}
#faq dt{font-weight:bold;cursor:pointer}
#faq dd{display:none;}
</style>

</head>
<body>
<ul id="faq">
<li>
<dl><dt>问题1 </dt><dd>答：1 </dd></dl>
</li>
<li>
<dl><dt>问题2 </dt><dd>答：2 </dd></dl>
</li>
<li>
<dl><dt>问题3 </dt><dd>答：3 </dd></dl>
</li>
<li>
<dl><dt>问题4 </dt><dd>答：4 </dd></dl>
</li>
</li>
</ul>

<br />

</body>
</html>

mr.sex 2013-2-14 16:19

sis是万能的啊. 都在这讨论起代码了.

sttstt 2013-2-15 18:44

非常感谢auian98朋友, 代码很完美!

引觞隐伤 2013-2-16 01:54

虽然没看懂，不过看了楼上的回复，改颜色以后说不定我也用得到

sttstt 2013-2-17 07:38

[quote]原帖由 [i]引觞隐伤[/i] 于 2013-2-16 01:54 发表 [url=http://174.127.195.166/bbs/redirect.php?goto=findpost&pid=89216953&ptid=4786022][img]http://174.127.195.166/bbs/images/common/back.gif[/img][/url]
虽然没看懂，不过看了楼上的回复，改颜色以后说不定我也用得到 [/quote]
从本贴直接复制代码是不行的.有错误, 是本论坛的问题. 你把添加的3句直接加到原代码,是完美的

一日三插 2013-2-17 14:26

不是盖的 SIS真是藏龙卧虎什么桌面上不能解决的问题这里一定能有高手给你出主意搞定感谢SIS感谢高人

页: [1]

查看完整版本: 求javascript添加一句改颜色