js实现黑色简易的滑动门网页tab选项卡效果


Posted in Javascript onAugust 31, 2015

本文实例讲述了js实现黑色简易的滑动门网页tab选项卡效果。分享给大家供大家参考。具体如下:

这是一款js实现的黑色风格网页滑动门菜单,虽然简洁但看上去不失大气,稍微修改一下即可换成选项卡,懂JS的朋友可好好修改一下哦,改成你喜欢的样式。

运行效果截图如下:

js实现黑色简易的滑动门网页tab选项卡效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>黑色简易的选项卡</title>
<style> 
body,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#outer{width:450px;margin:10px auto;}
#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
#tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}
#tab li.current{color:#000;background:#ccc;}
#content{border:1px solid #000;border-top-width:0;}
#content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}
</style>
<script> 
window.onload = function ()
{
 var oLi = document.getElementById("tab").getElementsByTagName("li");
 var oUl = document.getElementById("content").getElementsByTagName("ul");
 for(var i = 0; i < oLi.length; i++)
 {
  oLi[i].index = i;
  oLi[i].onmouseover = function ()
  {
   for(var n = 0; n < oLi.length; n++) oLi[n].className="";
   this.className = "current";
   for(var n = 0; n < oUl.length; n++) oUl[n].style.display = "none";
   oUl[this.index].style.display = "block"
  } 
 }
}
</script>
</head>
<body>
<div id="outer">
 <ul id="tab">
 <li class="current">第一课</li>
 <li>第二课</li>
 <li>第三课</li>
 </ul>
 <div id="content">
 <ul style="display:block;">
  <li>网页特效原理分析</li>
  <li>响应用户操作</li>
  <li>提示框效果</li>
  <li>事件驱动</li>
  <li>元素属性操作</li>
  <li>动手编写第一个JS特效</li>
  <li>引入函数</li>
  <li>网页换肤效果</li>
  <li>展开/收缩播放列表效果</li>
 </ul>
 <ul>
  <li>改变网页背景颜色</li>
  <li>函数传参</li>
  <li>高重用性函数的编写</li>
  <li>126邮箱全选效果</li>
  <li>循环及遍历操作</li>
  <li>调试器的简单使用</li>
  <li>典型循环的构成</li>
  <li>for循环配合if判断</li>
  <li>className的使用</li>
  <li>innerHTML的使用</li>
  <li>戛纳印象效果</li>
  <li>数组</li>
  <li>字符串连接</li>
 </ul>
 <ul>
  <li>JavaScript组成:ECMAScript、DOM、BOM,JavaScript兼容性来源</li>
  <li>JavaScript出现的位置、优缺点</li>
  <li>变量、类型、typeof、数据类型转换、变量作用域</li>
  <li>闭包:什么是闭包、简单应用、闭包缺点</li>
  <li>运算符:算术、赋值、关系、逻辑、其他运算符</li>
  <li>程序流程控制:判断、循环、跳出</li>
  <li>命名规范:命名规范及必要性、匈牙利命名法</li>
  <li>函数详解:函数构成、调用、事件、传参数、可变参、返回值</li>
  <li>定时器的使用:setInterval、setTimeout</li>
  <li>定时器应用:站长站导航效果</li>
  <li>定时器应用:自动播放的选项卡</li>
  <li>定时器应用:数码时钟</li>
  <li>程序调试方法</li>
 </ul>
 </div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
JavaScript继承方式实例
Oct 29 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
jquery实现点击变换导航样式的方法
Aug 31 #Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 #Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 #Javascript
Bootstrap的图片轮播示例代码
Aug 31 #Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 #Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 #Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 #Javascript
You might like
学习使用PHP数组
2006/10/09 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Python的迭代器和生成器
2015/07/29 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
运动会通讯稿50字
2014/01/30 职场文书
水利学院求职自荐书
2014/02/01 职场文书
教师专业自荐信
2014/05/31 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
2016大一新生军训感言
2015/12/08 职场文书