js实现黑色简易的滑动门网页tab选项卡效果
作者:企鹅 发布时间:2024-04-23 09:05:53
标签:js,滑动门,tab,选项卡
本文实例讲述了js实现黑色简易的滑动门网页tab选项卡效果。分享给大家供大家参考。具体如下:
这是一款js实现的黑色风格网页滑动门菜单,虽然简洁但看上去不失大气,稍微修改一下即可换成选项卡,懂JS的朋友可好好修改一下哦,改成你喜欢的样式。
运行效果截图如下:
在线演示地址如下:
http://demo.aspxhome.com/js/2015/js-simple-black-style-web-tab-codes/
具体代码如下:
<!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程序设计有所帮助。
0
投稿
猜你喜欢
- Django中的Models 是什么?通常一个Model对应数据库的一张数据表, Django中Models以类似的形式表现, 它包含了一些
- 背景简介ImageAI是一个面向计算机视觉编程的Python库,支持最先进的机器学习算法。主要图像预测,物体检测,视频对象检测与跟踪等多个应
- 问:如何让内联框架里面的网页背景透明?(用iframe嵌套一网页,怎么能够设置其背景为透明以便能显示父框架中网页的背景图?)答:这是需要 I
- 1.事件简介事件(event)是MySQL在相应的时刻调用的过程式数据库对象。一个事件可调用一次,也可周期性的启动,它由一个特定的线程来管理
- 以下的例子,将32x32的二维矩阵,装换成1x1024的向量def image2vector (filename): returnVect=
- 平时我们在使用MySQL数据库的时候经常会因为操作失误造成数据丢失,MySQL数据库备份可以帮助我们避免由于各种原因造成的数据丢失或着数据库
- Q: I am working with Oracle database 8.1.7 and I have written a JAVA c
- 前言对于前端来说,需要后端提供一个人脸识别接口,前端传入图片,接口识别并返回结果,如此看来,其实前端只需实现图片传入即可,但是其实不然,在传
- 一、两种模式pytorch可以给我们提供两种方式来切换训练和评估(推断)的模式,分别是:model.train() 和 model.eval
- ssh limit perl脚本主要作用:1.限制一个ssh用户的最大登录数为n,n可自定义。2.支持白名单,如root、test登录不受限
- 昨天下班后忽然兴起想写一个爬虫抓抓网页上的东西。花了一个钟简单学习了python的基础语法,然后参照网上的例子自己写了个爬虫。python数
- 博主PyQt5新手,最近在写一个可视化展示界面,第一个遇到的坑就是布局管理。其实可以不用相对布局,直接用QtDesigner进行傻瓜式的拖控
- 出差到了中国雅虎,这里的风格和淘宝很不一样。和雅虎一比,淘宝的办公环境就是个菜市场,闹哄哄,到处是人,在走道里狂奔乱窜,在每个会议室争得面红
- 引入依赖#?导入模块import?pymysqlimport?pandas?as?pdimport?numpy?as?npimport?ti
- 在Python中,多线程是实现并发的一种方式。多线程可以让程序在同一时间内进行多个任务,从而提高程序的效率和执行速度。本文将介绍Python
- 什么是 docopt?1、docopt 是一种 Python 编写的命令行执行脚本的交互语言。它是一种语言!它是一种语言!它是一种语言!2、
- replace()最简单的算是能力就是简单的字符替换。示例代码如下: <script language="javascrip
- window.onload=function() {&
- 一套javascript摇奖程序,随机6+1选号码,类似游戏彩票摇奖效果,实时滚动。截图:<style>.inp{ width:
- (1)Flush的内容至少要有256字节经过反复的测试,我得出一个结论。就是flush的内容至少要有256字节。也就是只有编译产生了至少25