Jquery滑动门/tab切换实现方法完整示例
本文实例讲述了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程序设计有所帮助。
赞 (0)