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 相关文章推荐
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
js实现拖拽元素选择和删除
Aug 25 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游戏编程25个脚本代码
2011/02/08 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
python实现可逆简单的加密算法
2019/03/22 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python滑块验证码的破解实现
2019/11/10 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
销售类个人求职信范文
2013/09/25 职场文书
公司企业表扬信
2014/01/11 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
四年级小学生评语
2014/12/26 职场文书
晚会闭幕词
2015/01/28 职场文书
八达岭长城导游词
2015/01/30 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
Linux安装Docker详细教程
2022/07/07 Servers