jquery实现选项卡
2017-06-03 23:01
113 查看
在刚开始接触前端的时候,听说别人实现了一个选项卡,感觉,哇塞,好高大上啊,真是厉害等等心理
但是后来学着学着其实选项卡的实现真的不难,其实别的小插件也不难,不要惧怕他
选择li元素后,对应的div内容区域也要跟着切换。我们可以根据li的index索引来显示对应的区域。
相关知识
jquery hover()方法详解
但是后来学着学着其实选项卡的实现真的不难,其实别的小插件也不难,不要惧怕他
实现原理
通过隐藏和显示来切换不同的内容实现的功能
选择选项卡的高亮状态切换,点击后当前li元素处于高亮状态,其他的li元素去掉高亮状态选择li元素后,对应的div内容区域也要跟着切换。我们可以根据li的index索引来显示对应的区域。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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> </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> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $div_li=$("div.tab_menu ul li"); $div_li.click(function(){ $(this).addClass("selected") .siblings().removeClass("selected"); var index=$div_li.index(this); $("div.tab_box > div").eq(index).show() .siblings().hide(); }).hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }); }); </script> </body> </html>
相关知识
jquery hover()方法详解
相关文章推荐
- Div+CSS+JQuery轻松实现选项卡"选项卡"
- [原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果
- jquery 实现类似139、163邮箱那样的多选项卡窗口浏览
- 利用jQuery实现->选项卡
- jQuery选项卡的实现(代码简短的)
- JQuery 实现选项卡功能
- Jquery实现的小案例3、小选项卡
- 天易12----jquery实现简单的选项卡效果
- jQuery学习笔记(3)----用jquery实现多选项卡功能
- jquery实现 选项卡
- [原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果
- 用jquery实现选项卡效果(非常漂亮,带动画效果)
- jquery实现tab标签选项卡自动切换效果
- jQuery实现一个简单的选项卡效果
- [原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果
- jquery + css 实现菜单选项卡
- JQuery实现的简单标签选项卡效果
- jQuery实例——选项卡的实现
- 选项卡通过jQuery实现
- Jquery实现的小案例3、小选项卡