html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

JavaScript实现多栏目切换效果_javascript技巧_

[ ] 已经帮助:人解决问题

在网站开发中尤其是新闻类网站,经常遇到多栏目切换的设计,这种效果有很多种实现效果,现在记录一种很简单的写法:4RAHTML5中文学习网 - HTML5先行者学习网

4RAHTML5中文学习网 - HTML5先行者学习网

 <style> .news_wrap{  width: 380px;  height: 266px;  float: left;  margin-left: 15px; } .news_head{  width: 380px;  border-bottom: 2px solid #dedede;  height: 51px;  line-height: 51px; } .tabList ul li{ float: left; cursor: pointer; font-weight: bold; text-align: center; font-size: 16px; width: 72px; } .cli1{ color: #3a7aaf; border-bottom: 2px solid #3a7aaf; } .more{ font-size: 14px; color: #9a9a9a; float: right; font-weight: normal; padding-right: 0; } .tabCon{ width: 376px; padding-top: 13px; overflow: hidden; } </style> <div class="news_wrap"> <div class="news_head">  <div class="tabList">  <ul>   <li class="cli1" id="p1" onmouseover="return swap_tab(1)" >工作动态</li>   <li class="cli2" id="p2" onmouseover="return swap_tab(2)" >媒体链接</li>   <li class="cli2" id="p3" onmouseover="return swap_tab(3)" >领导活动</li>  </ul>  </div>  <div class="more">  <div id="j1">工作动态_more</div>  <div id="j2" style="display:none;">媒体链接_more</div>  <div id="j3" style="display:none;">领导活动_more </div>  </div> </div> <div class="tabCon">  <div id="n1">  <li>工作动态_list</li>  <li>工作动态_list</li>  <li>工作动态_list</li>  </div>  <div id="n2" style="display:none;">  <li>媒体链接_list </li>  <li>媒体链接_list </li>  <li>媒体链接_list </li>  </div>  <div id="n3" style="display:none;">  <li>领导活动_list </li>  <li>领导活动_list </li>  <li>领导活动_list </li>  </div> </div> </div><script> function swap_tab(n){ //鼠标触发事件 for(var i=1;i<4;i++){  var curC=document.getElementById("n"+i);  var curB=document.getElementById("p"+i);  var mores = document.getElementById("j"+i);     if(n==i){   curC.style.display="block";   curB.className="cli1";   mores.style.display = "block";  }  else{   curC.style.display="none";   curB.className="cli2";   mores.style.display = "none";     } }}</script>

以上所述是小编给大家介绍的JavaScript实现多栏目切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!4RAHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助