js主要功能之一就是实现页面的特效,窗体的切换可以减少页面的大小,被门户网站大量应用
思路:
1,先将要显示的设置为display:bisible 否则设为none 2,设置栏目的id ,js获取栏目的id,如果id为Null就设置为显示 3,判断js获取的id名字;再设置是否显示
代码实现:
html代码:
<div id="mainRight"> <ul> <li id="a" style="border-top-color:#00ff00;border-top-width:0px;border-top-style:solid" onmouseover="fun_changge(this,'mainRight_sp')">博客推荐</li> <li id="b" style="border-top-color:#00ff00;border-top-width:3px;border-top-style:solid" onmouseover="fun_changge(this,'mainRight_ps')">视频资料</li> </ul> </div> <div id="mainRight_sp" style="display:none;"> <ul> <p><a href="#"><li>第十一届北京论坛致贺信</li></a></p> <p><a href="#"><li>中国新闻奖颁奖</li></a></p> <p><a href="#"><li>APEC未来寄望于中国</li></a></p> <p><a href="#"><li>赴澳大利亚出席G20峰会</li></a></p> <p><a href="#"><li>中日就改善关系达成共识 日承认钓鱼岛有不同主张</li></a></p> <p><a href="#"><li>外交部回应中日领导人会晤</li></a></p> <p><a href="#"><li>商务部回应墨西哥取消中国高铁招标:未得到消息</li></a></p> <p><a href="#"><li>++++++++++++++++</li></a></p> <p><a href="#"><li>俄罗斯议员建议:精子发给全体俄女性受精</li></a></p> </ul> </div> <!--1111--> <div id="mainRight_ps" style="display:''"> <div id="mps"> img src="image/sanxing_1.jpg" / > </div> <div id="mps_boke"> <ul> <p><a href="#"><li>外交部回应中日领导人会晤</li></a></p> <p><a href="#"><li>商务部回应墨西哥取消中国高铁招标:未得到消息</li></a></p> <p><a href="#"><li>香港立法会否决调查梁振英“收400万英镑”动议</li></a></p> <p><a href="#"><li>俄罗斯议员建议:将普京精子发给全体俄女性受精</li></a></p> </ul> </div> </div>
js代码实现 切换;
<script type="text/JavaScript"> function fun_changge(li,id){ var div = document.getElementById(id); if(div.style.display=='none'){ div.style.display=''; li.style.borderTopWidth = '3px'; if(id=="mainRight_sp"){ var div_sp = document.getElementById('mainRight_ps'); div_sp.style.display='none'; document.getElementById("b").style.borderTopWidth = '0px'; }else{ var div_sp = document.getElementById('mainRight_sp'); div_sp.style.display='none'; document.getElementById("a").style.borderTopWidth = '0px'; } } } </script>