您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
js/jQuery简单实现选项卡功能
作者：佚名 责任编辑：admin 更新时间：2022-06-22
本篇文章主要是对js/jQuery简单实现选项卡功能的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
第一种方法是用原生的js代码如下： 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单选项卡</title> <style type="text/css"> body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{width:450px;margin:10px auto;} #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;} #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;} #tab li.current{color:#000;background:#ccc;} #content{border:1px solid #000;border-top-width:0;} #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;} </style> <script type="text/javascript"> window.onload = function () { var oLi = document.getElementById("tab").getElementsByTagName("li"); var oUl = document.getElementById("content").getElementsByTagName("ul"); for(var i = 0; i < oLi.length; i++) { oLi[i].index = i; oLi[i].onmouseover = function (){ for(var n = 0;n < oLi.length;n++) { oLi[n].className = ""; this.className = "current"; } for(var n = 0;n <oUl.length;n++) { oUl[n].style.display = "none"; oUl[this.index].style.display="block"; } } } } </script> </head> <body> <div id="outer"> <ul id="tab"> <li class="current">科技</li> <li>旅游</li> <li>娱乐</li> </ul> <div id="content"> <ul style="display:block;"> <li>宏碁R7双转轴变形本评测：触摸板设计过于另类(图)</li> <li> 超薄加防水 索尼Xperia Tablet Z平板电脑评测</li> <li>诺基亚Lumia 925评测 最好的WP8智能手机</li> <li> 联想IdeaPad S405评测 性能主流续航待提升</li> <li>小辣椒M2智能手机评测: 再不换壳我们就该老了</li> <li>联想K900内部构造 看国产神器多少国产货(组图)</li> <li>联想K900内部构造 看国产神器多少国产货(组图)</li> <li>网页换肤效果</li> <li>联想K900内部构造 看国产神器多少国产货(组图)</li> </ul> <ul> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> </ul> <ul> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> </ul> </div> </div> </body> </html> 第二种方法是用jQuery实现，代码比第一种简洁 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单选项卡</title> <style type="text/css"> body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{width:450px;margin:10px auto;} #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;} #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;} #tab li.current{color:#000;background:#ccc;} #content{border:1px solid #000;border-top-width:0;} #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;} </style> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ var timeid; $("#tab").find("li").each(function(index){ var sLi=$(this); sLi.mouseenter(function(){ timeid= setTimeout(function(){ sLi.addClass("current").siblings().removeClass("current"); sLi.parent().next().find("ul:eq(" + index +")"- 上一个程序编程： jQuery与其他库冲突的方法介绍
- 下一个程序编程： javascript中处理时间戳为日期格式的方法
