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 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
React中的render何时执行过程
Apr 13 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 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错误处理函数
2016/04/03 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
分厂厂长岗位职责
2013/12/29 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
手机被没收的检讨书
2014/10/04 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js