js部分： <script type="text/javascript"> function showdiv(){ var links = document.getElementsByTagName("a")[0]; var ndiv = document.getElementById("show"); if (ndiv.style.display == "none"){ ndiv.style.display = "block"; } else{ ndiv.style.display = "none"; } } </script> HTML部分： <div> <a onclick="showdiv()" href="#">点击显示,再次点击隐藏</a> <div id="show" style="display:none;">我想这个可以随时打开或隐藏</div> </div>
CSS部分： <style type=”text/css”> ul{ width:438px; } li{ float:left; width:146px; height:80px; text-align:center; font-size:12px; list-style:none; } li img{ margin:0 auto; display:block; } </style> HTML部分： <ul id=”bxlist”> <li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li> <li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li> <li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li> <li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li> <li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input [...]
CSS部分： <style type="text/css"> .color{ color:#f60; } </style> HTML部分： <div id="all"> <li><a href="#">网站首页</a></li> <li><a href="#">产品介绍</a></li> <li><a href="#">联系我们</a></li> </div> JS部分： <script type="text/javascript"> function changeColor(){ var fdiv = document.getElementById("all"); var alllink = fdiv.getElementsByTagName("a"); for (var i=0; i<alllink.length; i++){ alllink[i].onclick = function(){ for (var j=0; j<alllink.length;j++){ alllink[j].className=""; } this.className="color"; } } } window.onload = changeColor [...]
function changeTrColor(){ var tables = document.getElementsByTagName("table"); for (var i=0; i<tables.length; i++){ var odd = false; var rows = tables[i].getElementsByTagName("tr"); for (var j=0; j<rows.length; j++){ if (odd == true){ rows[j].style.backgroundColor = "#f00"; odd = false; } else { odd = true; [...]
JS部分： <script type=”text/javascript”> function addCon(){ var para = document.createElement(“p”); var cont1 = document.createTextNode(“嘿嘿，我就是”); var em = document.createElement(“em”); var cont2 = document.createTextNode(“这样”); var cont3 = document.createTextNode(“被插入到文档里的”); para.appendChild(cont1); em.appendChild(cont2); para.appendChild(em); para.appendChild(cont3); var div = document.getElementById(“testdiv”); div.appendChild(para); document.getElementById(“finput”).setAttribute(“value”,”再点一次吧”) } </script> html部分： <div style=”border:1px solid #ccc;” id=”testdiv”> <input id=”finput” type=”button” value=”点我把” onclick=”addCon()” /></div> 例子比较简单 用到基础的方法appendChild
JS部分： <script type="text/javascript"> function showQuoteSite(){ var quotes = document.getElementsByTagName("blockquote"); for (var i=0; i<quotes.length; i++) { var url = quotes[i].getAttribute("cite"); var quoteChildren = quotes[i].getElementsByTagName("*");//每个quote元素里所有元素节点（是一个数组） var elem = quoteChildren[quoteChildren.length - 1];// 所有元素节点里的最后一个元素节点 赋给变量elem var link = document.createElement("a"); var link_text = document.createTextNode("source"); link.appendChild(link_text); link.setAttribute("href",url); var sups = document.createElement("sup"); sups.appendChild(link); [...]
http://www.yybushe.com/onClick_Change_DivShow.html 实现原理比较简单： 通过getElementsByTagName找出所有a 并置空a的样式 点击的时候赋样式 通过document.getElementsByTagName找出所有div并置空div的样式 通过split和getElementById找出对应div 并赋div on状态下的样式名
要实现的效果：点击链接改变背景颜色 先看css部分： .bgcolor{ background:#ccc; } 再看html部分： <ul id="ful"> <li><a onclick="changeBgColor(this)" href="#">我们是做什么的？</a></li> <li><a onclick="changeBgColor(this)" href="#">我们能做些什么？</a></li> <li><a onclick="changeBgColor(this)" href="#">我们已经做过些什么？</a></li> </ul> 最后来看js部分： function changeBgColor(link) { var alllinks=document.getElementById("ful").getElementsByTagName("a"); for (var i=0; i<alllinks.length; i++){ alllinks[i].className=""; } link.className="bgcolor"; } 原理比较简单： 定义一个函数，让每个a的onclick时间去调用这个函数，将ID对应的那个UL里所有a的className都质空，被点击的a的className为你设定的bgcolor
