爱站程序员基地本文实例讲述了Jquery滑动门/tab切换实现方法。分享给大家供大家参考，具体如下：
<!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><meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" /><title></title><style>*{ margin:0; padding:0;}body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}.tab { width:240px;margin:50px;}.tab_menu { clear:both;}.tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}.tab_menu li.hover { background:#DFDFDF;}.tab_menu li.selected { color:#FFF; background:#6D84B4;}.tab_box { clear:both; border:1px solid #898989; height:100px;}.hide{display:none}</style><!-- 引入jQuery --><script src=\"http://libs.baidu.com/jquery/2.0.0/jquery.min.js\"></script><script type=\"text/javascript\" >$(function(){var $div_li =$(\"div.tab_menu ul li\");$div_li.click(function(){$(this).addClass(\"selected\") //当前<li>元素高亮.siblings().removeClass(\"selected\"); //去掉其它同辈<li>元素的高亮var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。$(\"div.tab_box > div\") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div.eq(index).show() //显示 <li>元素对应的<div>元素.siblings().hide(); //隐藏其它几个同辈的<div>元素}).hover(function(){ //添加光标滑入滑出效果$(this).addClass(\"hover\");},function(){$(this).removeClass(\"hover\");})})</script></head><body><div class=\"tab\"><div class=\"tab_menu\"><ul><li class=\"selected\">时事</li><li>体育</li><li>娱乐</li></ul></div><div class=\"tab_box\"><div>时事</div><div class=\"hide\">体育</div><div class=\"hide\">娱乐</div></div></div></body></html>
运行结果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- jQuery实现类似滑动门切换效果的层切换
- jQuery实现的经典滑动门效果
- 基于jquery自己写tab滑动门(通用版)
- jQuery实现自动切换播放的经典滑动门效果
- jQuery实现的多滑动门，多选项卡效果代码
- jquery实现标题字体变换的滑动门菜单效果
- 使用jquery实现div的tab切换实例代码
- jQuery简单tab切换效果实现方法
- jquery实现简单Tab切换菜单效果
- jQuery简单几行代码实现tab切换
- jQuery+css实现的tab切换标签(兼容各浏览器)
