用js和jQuery分别实现选项卡功能
2016-07-19 14:22
651 查看
js实现选项卡:
jQuery实现选项卡:
<!doctype html> <html> <head> <!--声明当前页面编码集(中文编码<gbk,gb2312>,国际编码<utf-8>)--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="关键词,关键词"> <meta name="description" content=""> <title> html </title> <style type="text/css"> *{padding:0px;margin:0px;} /*tab start*/ #tab{width:670px;height:480px;border:1px solid red;margin:50px auto;} #card{width:100%;height:40px;background:pink;cursor:pointer;} #card li{list-style:none;float:left;border:1px solid pink;padding:10px;} #card .on{background:#fff;} #content{width:100%;height:440px;} #content div{display:none;} /*tab end*/ </style> </head> <body> <!--tab start--> <div id="tab"> <ul id="card"> <li class="on">选项一</li> <li>选项二</li> <li>选项三</li> <li>选项四</li> </ul> <div id="content"> <div style="display:block;">1</div> <div>2</div> <div>3</div> <div>4</div> </div> </div> <!--tab end--> <script> function $(id){ return document.getElementById(id); } //获取card下面所有的li元素 var liDoms = $("card").children; for(var i=0;i<liDoms.length;i++){ //给每个li对象动态绑定一个属性 liDoms[i].index = i; liDoms[i].onmouseover = function(){ //给每个li加on样式 this.className = "on"; siblings(this,function(){ this.className = ""; }) //改变每个div,将对应的内容显示出来 var tabDom = $("content").children[this.index]; tabDom.style.display = "block"; siblings(tabDom,function(){ this.style.display = "none"; }); }; } //封装jQuery里面的siblings()方法 function siblings(dom,callback){//a,b,fn var pDom = dom.parentNode.children; for(var i=0;i<pDom.length;i++){ if(pDom[i] != dom){ callback.call(pDom[i]); } } /* var pDom = dom.parentNode.children; var tabs = [].slice.call(pDom); tabs.filter(function(obj){ if(obj != dom){ callback.call(obj); } }); */ } /* Array.prototype.slice = function(){ var arr = []; for(var i=0;i<this.length;i++){ arr.push(this[i]); } return arr; }; */ </script> </body> </html>
jQuery实现选项卡:
<!doctype html> <html> <head> <!--声明当前页面编码集(中文编码<gbk,gb2312>,国际编码<utf-8>)--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="关键词,关键词"> <meta name="description" content=""> <title> html </title> <style type="text/css"> *{padding:0px;margin:0px;} /*tab start*/ #tab{width:670px;height:480px;border:1px solid red;margin:50px auto;} #card{width:100%;height:40px;background:pink;cursor:pointer;} #card li{list-style:none;float:left;border:1px solid pink;padding:10px;} #card .on{background:#fff;} #content{width:100%;height:440px;} #content div{display:none;} /*tab end*/ </style> </head> <body> <!--tab start--> <div id="tab"> <ul id="card"> <li class="on">选项一</li> <li>选项二</li> <li>选项三</li> <li>选项四</li> </ul> <div id="content"> <div style="display:block;width:100%;height:100%;background:yellow;">1</div> <div style="width:100%;height:100%;background:red;">2</div> <div style="width:100%;height:100%;background:blue;">3</div> <div style="width:100%;height:100%;background:orange;">4</div> </div> </div> <!--tab end--> <script src="js/jquery-1.11.2.min.js"></script> <script> $("#card").children().mouseover(function(){ //获取当前点击的li对象 var $li = $(this); //获取当前点击的索引 var index = $li.index(); $li.addClass("on").siblings().removeClass("on"); $("#content").children().eq(index).show().siblings().hide(); }); </script> </body> </html>
相关文章推荐
- jquery图表插件morris.js参数详解和highcharts图表插件
- 网站常用jquery小控件总结
- 页面加载动画,加载完后隐藏动画
- jQuery 序列化表单数据 serialize() serializeArray()
- 用ajax实现动态获取天气预报的案例
- jquery学习基础使用
- jquery学习进阶使用
- jquery基本选择器
- jQuery是一个JavaScript库极大的简化JavaScript编程
- $.ajax()参数详解
- 全面学习JQuery动态滚动加载web网页内容
- JQuery 控制元素显示隐藏
- jQuery插件开发
- Jquery 选择 select 、radio 的几种方式
- jquery sortable实现table拖拽排序,更新时只更新受影响的行
- Jquery 常用的 选择器 归纳
- js、jquery比较String型数字大小的时候应该注意的问题
- (高级篇)jQuery学习之jQuery Ajax用法详解
- Jquery定义对象( 闭包)
- jQuery中.bind() .live() .delegate() .on()的区别