用js和jQuery分别实现选项卡功能
js实现选项卡：
<!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>
