JQ---选项卡
2015-11-27 16:07
197 查看
2015-11-27—选项卡
(1)通过点击改变选项卡的显示内容
(2)通过点击改变选项卡的显示内容,鼠标移入li时改变其背景颜色
(1)通过点击改变选项卡的显示内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡</title> <style type="text/css"> *{margin: 0;padding: 0;} .tab{ position: absolute; top: 20%; left: 40%; } .selected{ background-color: yellowgreen; } .hide{ display: none; } .table_menu ul li{ list-style: none; float: left; padding: 8px 25px 8px 25px; cursor: pointer; border: 1px solid greenyellow; } .tab_box{ clear: both; width: 250px; height: 150px; border: 1px solid #999; } </style> <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var $div_li=$("div .table_menu ul li"); //设置li的单击事件 $div_li.click(function(){ //设置li单击时的样式 $(this).addClass("selected") .siblings().removeClass("selected"); //记录当前点击li的index var index=$div_li.index(this); //选择与li相同index的div显示,其余隐藏 $("div .tab_box >div") .eq(index).show() .siblings().hide(); }); }) </script> </head> <body> <div class="tab"> <div class="table_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>
(2)通过点击改变选项卡的显示内容,鼠标移入li时改变其背景颜色
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡</title> <style type="text/css"> *{margin: 0;padding: 0;} b4ef .tab{ position: absolute; top: 20%; left: 40%; } .selected{ background-color: yellowgreen; } .hide{ display: none; } .hover{ background-color: aquamarine; } .table_menu ul li{ list-style: none; float: left; padding: 8px 25px 8px 25px; cursor: pointer; border: 1px solid greenyellow; } .tab_box{ clear: both; width: 250px; height: 150px; border: 1px solid #999; } </style> <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var $div_li=$("div .table_menu ul li"); //设置li的单击事件 $div_li.click(function(){ //设置li单击时的样式 $(this).addClass("selected") .siblings().removeClass("selected"); //记录当前点击li的index var index=$div_li.index(this); //选择与li相同index的div显示,其余隐藏 $("div .tab_box >div") .eq(index).show() .siblings().hide(); }).hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }); }) </script> </head> <body> <div class="tab"> <div class="table_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>
相关文章推荐
- 原生js和jQuery写的网页选项卡特效对比
- javascript 定时自动切换的选项卡Tab
- javascript+css 新闻显示tab 选项卡效果
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- JS+CSS实现的日本门户网站经典选项卡导航效果
- JS自定义选项卡函数及用法实例分析
- 表现、结构、行为分离的选项卡效果
- jQuery实现仿腾讯迷你首页选项卡效果代码
- jquery实现超简洁的TAB选项卡效果代码
- jquery实现可自动收缩的TAB网页选项卡代码
- jquery实现经典的淡入淡出选项卡效果代码
- jQuery实现tab选项卡效果的方法
- jQuery网页选项卡插件rTabs用法实例分析
- jQuery超简单选项卡完整实例
- js实现黑色简易的滑动门网页tab选项卡效果
- JS实现黑色风格的网页TAB选项卡效果代码
- js实现类似菜单风格的TAB选项卡效果代码
- 基于JQuery的6个Tab选项卡插件
- 简单选项卡 js和jquery制作方法分享
- android 选项卡(TabHost)如何放置在屏幕的底部