js实现简单的滑动门和tab选项卡
Posted 小极客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现简单的滑动门和tab选项卡相关的知识，希望对你有一定的参考价值。
思想：首先定义三个选项卡，可以用任何标签，只要如下图，
一共有三个ul，第一个ul给一个class，因为默认第一个选项卡的内容显示出来，
其他两个ul display：none；
当我鼠标移到第二个第三个选项卡的时候，删除第一个选项卡的class，鼠标移到哪里就给哪个选项卡那个class
思路就這样
下面是完全的代码
最好自己写写，然后参考自己下面的代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <style type="text/css"> *{margin:0;padding:0;} body{font-size:12px;} #content{margin:0 auto;width:600px;border:1px #000 solid;} #tabs{height:30px;background:black;overflow:hidden;position:relative;} #tabs #state{ display:block; top:0;right:0; width:30px;height:30px; font-size:24px; font-weight:700; text-align:center; color:#fff; cursor:pointer; position:absolute; } #tabs li{ display:inline; /**/ padding:0 8px; line-height:30px; color:#fff; list-style:none; cursor:pointer; float:left; } #tabs .active{color:#000;background:#fff;} #list {padding:10px 0;} #list ul{margin:0 25px;display:none;} #list ul li{height:25px;line-height:25px;} #list .active{display:block;} </style> </head> <body> <script> window.onload=function() { var $ =function(ids) { return document.getElementById(ids); } var tabs= $("tabs").getElementsByTagName("li"); var state = $("state"); var list = $("list"); var ul = list.getElementsByTagName("ul"); for(var i=0;i<tabs.length;i++) { tabs[i].index=i; tabs[i].onmouseover=function() { for(var i=0;i<tabs.length;i++) { tabs[i].className=ul[i].className=\'\'; } this.className=ul[this.index].className="active"; } } //方法2 // for(var i=0;i<tabs.length;i++) // { // ( // function(index) // { // tabs[index].onmouseover=function() // { // for(var j=0;j<tabs.length;j++) // { // tabs[j].className=ul[j].className=\'\'; // } // this.className=ul[index].className="active"; // } // } // )(i) ; // } //方法1 // function clearEvent(index) // { // tabs[index].onmouseover=function() // { // for(var j=0;j<tabs.length;j++) // { // tabs[j].className=ul[j].className=\'\'; // } // this.className=ul[index].className="active"; // } // } //加号位置的收缩 state.onclick = function() { var text = this.innerHTML; if( text == "+") { this.innerHTML="-"; list.style.display="block"; } else { this.innerHTML="+"; list.style.display="none"; } } } </script> <div id="content"> <div id="tabs"> <ul> <li class="active">暴给力</li> <li>职业指导</li> <li>充电区</li> </ul> <span id="state">-</span> </div> <div id="list"> <ul class="active"> <li>IE6 PNG 解决方案合集</li> <li>firefox下输入框innerHtml问题</li> <li>精品菜单导航，多年精心收集整理上上品菜单</li> <li>60个WEB使用效果集合</li> <li>CSS3动态按钮导航集锦</li> <li>Html 5 的革新,结构之美</li> <li>javascript高级程序设计</li> <li>w3cfuns我爱你</li> <li>高性能网站建设指南</li> <li>罕见的皮具拉链效果博客</li> <li>基础5块状元素的内联元素</li> <li>羊癫疯的纯css下拉导航原理</li> <li>请问這个排序功能如何实现？</li> <li>分享10个便利的html5/css3框架</li> <li>白鹭ersonal申请热血活动板块版主</li> <li>web前端标准在哥哥浏览器中的差异</li> </ul> <ul> <li>腾讯面试题</li> <li>近期面试感受</li> <li>腾讯实习生web前端js开发工程师面试经历</li> <li>阿里巴巴web前端开发面试题</li> <li>网易页面重构面试题</li> <li>网易web前端开发师面试回答的经历</li> <li>2001腾讯前端面试稿</li> <li>alibaba web前段开发工程师面试奇遇记</li> <li>特训实习生网页重构组招聘公开试题</li> <li>求职记--记录成为面霸的全过程</li> <li>淘宝web前端开发面试经历</li> <li>百度前端面试题对话记录</li> <li>2011年最新百度前端开发面试经历</li> <li>去tx的事基本黄了，题我发出来</li> <li>俺们公司的面试题</li> </ul> <ul> <li>厘米IT学院第89期</li> <li>厘米IT学院第88期</li> <li>厘米IT学院第87期</li> <li>厘米IT学院第86期</li> <li>厘米IT学院第85期</li> <li>厘米IT学院第84期</li> <li>厘米IT学院第83期</li> </ul> </div> </div> </body> </html>
以上是关于js实现简单的滑动门和tab选项卡的主要内容，如果未能解决你的问题，请参考以下文章