每日小練習之JQuery選項卡(part2)
2019-04-03 15:17
134 查看
今天來一波簡單的選項卡功能編寫
運用了以下方法:
1:load()方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。
2:each()方法规定为每个匹配元素规定运行的函数。
3:removeClass() 方法从被选元素移除一个或多个类。addClass() 方法向被选元素添加一个或多个类。
4:setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
5:mouseover()当鼠标指针位于元素上方时,会发生 mouseover 事件。mouseout()当鼠标指针从元素上移开时,发生 mouseout 事件。
栗子一:鼠標經過和離開的選項卡
css:
[code]* { margin:0; padding:0; list-style: none; box-sizing:border-box; } a { text-decoration: none; } .box_one { margin-bottom:20px } .box_one>ul>li { float:left; background:#000000; padding:5px 10px; color:red; border:1px solid #FFF; cursor:pointer; } .box_one>ul>li.on { background:#FF0000; color:#000000; border:1px solid #FF0000; } .content_com { clear:both; height:100px; width:300px; background:#FF0000; color:#000000; display:none; padding:5px 12px; } .content_one { display:block; }
HTML:
[code]<div class="box_one"> <ul> <li class="on">菜单一</li> <li>菜单二</li> <li>菜单三</li> </ul> <div class="content_one content_com">内容1</div> <div class="content_com">内容2</div> <div class="content_com">内容3</div> </div>
JQ:
[code]$(document).ready(function(){ $(".box_one>ul>li").each(function(index){ var liNode = $(this); $(this).mouseover(function(){ var t; t = setTimeout(function(){ $("div.content_one").removeClass("content_one"); $(".box_one>ul>li.on").removeClass("on"); $("div.content_com").eq(index).addClass("content_one"); liNode.addClass("on"); },300) }).mouseout(function(){ clearTimeout(t) }); }); })
結果:
栗子二:點擊后觸發選項卡
menu.css
[code]* { margin:0; padding:0; list-style: none; box-sizing:border-box; } a { text-decoration: none; } .menu_two>ul>li { float:left; border:1px solid blueviolet; padding:10px 20px; margin-right:2px; cursor:pointer; background:#FFF; } .menu_two>ul>li.active { border:1px solid darkgreen; color:palevioletred; position:relative; z-index:99; border-bottom:1px solid #FFF; } div#menu_content { width:300px; height:200px; border:1px solid #000000; clear:left; position:relative; top:-1px; overflow:auto; }
HTML
[code]<div class="menu_two"> <ul> <li class="active">one</li> <li>two</li> <li>three</li> </ul> </div> <div id="menu_content"></div> <div class="titjs"> <h4 class="lead">美麗的地方西藏</h4> <p class="text-justify">西藏旅遊資源豐富,其自然和人文景觀得天獨厚。旅遊業已成為西藏發展戰略之一[7]。2015年西藏累計接待遊客突破2000萬人次,全年旅遊總收入達280億元,占全區生產總值25%以上,對經濟增長的貢獻率超過20%[8]。預計到2020年,西藏年接待遊客將突破3000萬人次,年旅遊總收入突破550億元[9]。但同時,西藏旅遊資源也很脆弱,隨著大量遊客湧入西藏,西藏的民族文化、風俗習慣難免受到影響和衝擊[10]。故現時亦提倡在開發旅遊資源的同時,注意對本地風土習俗的保護[11]。 </p> </div>
menu.js
[code]$(document).ready(function(){ $("#menu_content").load("css/menu.css"); $(".menu_two>ul>li").each(function(index){ $(this).click(function(){ $(".menu_two>ul>li.active").removeClass("active"); $(this).addClass("active"); if(index==0){ $("#menu_content").load("css/menu.css"); }else if(index==1){ $("#menu_content").load("js/menu.js"); }else if(index==2){ $("#menu_content").load("index.html .titjs") } }) }) })
結果為:
相关文章推荐
- android每日一问1【2011-8-30】
- 每日一记录
- 每日一省之————加权有向图的最短路径问题
- 图形推理每日练习及精解20110830
- [每日刷题(2015/6/27)]在一个分布式银行系统中,你如何测试一台ATM机?
- Tomcat之——宕机自动重启和每日定时启动tomcat
- AdMob专注于移动应用广告 每日发生27亿次请求
- 如何关闭"QQ网购每日精选"信息提醒
- 【Java每日一题】20170308
- 纯命令行实现.Net项目每日构建(升级版本)
- 「深入 Exchange 2013」12 传输架构Part2
- 3月9日,TextField,每日20行。
- KingDZ 变菜鸟,每日一个C#小实例之---C#开机自动执行程序
- 深入浅出CChart 每日一课——快乐高四第六课 二丫的青梅,返璞归真之普通窗口多区域绘图
- 毕设知识点总结——part2.聚类
- android每日一问【2011-09-30】
- 经典算法题每日演练——第十三题 赫夫曼树
- 3月13日,Menu,每日20行。
- Sql 每月,每日,每年统计
- 学习英语每日一 On the house. 赠品