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选项卡的更多相关文章
- 代码简洁的滑动门(tab)jquery插件
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- HTML+CSS技术实现网页滑动门效果
一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- JS滑动门,JQuery滑动门
<a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...
- js 滑动门的实现
原理:滑动门,这里以图片进行实例,首先设定主盒子div的宽度和高度设定,并进行图片初始化位置的设定,然后将图片绑定事件,并设定要达到的效果 html代码: <!DOCTYPE html> ...
- js 简单的滑动4
js 简单的滑动教程(四) 作者:Lellansin 转载请标明出处,谢谢 在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论js的滑动. 相信细心的朋友应该已经发现了,在本教程 ...
- js 简单的滑动3
js 简单的滑动教程(三) 作者:Lellansin 转载请标明出处,谢谢 在前面的基础上(js 简单的滑动教程(二)),我们可以再添加一些功能使程序的可用性更高. 比如自动为图片的LI赋id值, ...
- js 简单的滑动2
js 简单的滑动教程(二) 作者:Lellansin 转载请标明出处,谢谢 现在我们让滑动多一个功能,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候可以循环滑动 原理也很将简单,用posi ...
- js 简单的滑动1
js 简单的滑动教程(一) 作者:Lellansin 转载请标明出处,谢谢 首先我们要实现一个简单的滑动,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候就不能滑动. 这个简单滑动的原理是, ...
随机推荐
- VirtualBox 下USB 设备加载的步骤及无法加载的解决办法
1. 将u盘插入电脑,在windows能够识别后,进入VirtualBox的选定要加载的虚拟机,选择设置——>选择usb设备项 2. 选择右边的第一或者是第二个图标,增加一个新的筛选器,第一个图 ...
- Mysql中is marked as crashed and should be repaired问题的处理
问题描述:浏览页面提示:.bbs[Table]threads' is marked as crashed and should be repaired 产生原因:表在查询或其它系统操作下损坏. 解决方 ...
- 黄聪:wordpress中PHP运行错最有效解决办法Fatal error: Out of memory (allocated 6029312)(转)
近日在升级wordpress 3.2.1和若干插件的过程中,发现了一个wordpress的错误:Allowed memory size of XXX bytes exhausted Fatal err ...
- 7. redis优化
一. redis使用上的优化 精简键名和键值 键名:尽量精简,但是也不能单纯为了节约空间而使用不易理解的键名. 键值:对于键值的数量固定的话可以使用0和1这样的数字来表示,(例如:male/femal ...
- linux 定时器编程实例(完善中).....
最近在写linux 下的定时器编程实验,测试发现 usleep函数在 x86 架构下的定时还是比较准确的,在arm9下 就不太准了. 今天用linux 下的setitimer()函数进行了定时 器的测 ...
- git 使用详解(8)-- tag打标签
打标签 同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做.本节我们一起来学习如何列出所有可用的标签,如何新建标签,以 ...
- svn 中 版本回退
譬如有个文件,有十个版本,假定版本号是1,2,3,4,5,6,7,8,9,10. Revert to this revision: 如果在版本6这里点击“Revert to this revision ...
- iOS 审核加急通道使用--转载来源--有梦想的蜗牛
提交完成后进入加急审核页面. 链接:https://developer.apple.com/appstore/contact/appreviewteam/index.html 在i would lik ...
- pgdump使用
pgdump dbname-h hostIp-U user-p port-t schema_name.table_name-s // nodata-f // to output file /opt/P ...
- English article1
1. Midlife for many is a time of transition, a time of questioning and a time of change, not just ph ...