js实现的简洁网页滑动tab菜单效果代码


Posted in Javascript onAugust 24, 2015

本文实例讲述了js实现的简洁网页滑动tab菜单效果代码。分享给大家供大家参考。具体如下:

这里介绍的是一款风格简洁的网页滑动门代码,基于JS和Div+CSS实现。滑动门菜单,只需鼠标放上去就切换的菜单,和网页选项卡只是操作形式上的不同而已,滑动门改选项卡只需将门菜单中的onmouseover换成onclick就行了,这样换了之后,切换内容需要鼠标点击门菜单才可以。

运行效果截图如下:

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>
<title>网页滑动门菜单</title>
<style>
* {list-style-type:none; font-size:12px; text-decoration:none; margin:0; padding:0;}
.tab{ margin:20px; width:244px; height:200px; overflow:hidden; border:1px #AACCEE solid;}
.tab_b{ overflow:hidden; margin:5px; }
.menu{overflow:hidden; }
.menu li{ display:block; float:left; display: list-item; text-align:center; width:60px; background-color:#EDF4FC;line-height:20px; border-bottom:1px #AACCEE solid;border-right:1px #AACCEE solid; }
.menu li a{ display:block;}
.menu_d{border-bottom:1px #FFFFFF solid;background-color:#FFFFFF; }
.tab ul li.aaa{background: #FFFFFF;border-bottom:0px #FFFFFF solid;}
</style>
</head>
<body>
<script language="javascript">
function tabs(n)
{
var len = 4;
for (var i = 1; i <= len; i++)
{
document.getElementById('tab_a' + i).style.display = (i == n) ? 'block' : 'none';
document.getElementById('tab_' + i).className = (i == n) ? 'aaa' : 'none';
}
}
</script>
<div class="tab">
<ul class="menu" id="menutitle">
<li id="tab_1" class="aaa"><a href="javascript:void(0)" onclick="tabs('1');" >新闻</a></li>
<li id="tab_2" ><a href="javascript:void(0)" onmouseover="tabs('2');" >生活</a></li>
<li id="tab_3" ><a href="javascript:void(0)" onmouseover="tabs('3');" >滚动</a></li>
<li id="tab_4" ><a href="javascript:void(0)" onmouseover="tabs('4');" >旅游</a></li>
</ul>
<div class="tab_b" id="tab_a1" style="display:block;"> 国内国际新闻</div>
<div class="tab_b" id="tab_a2" style="display:none;">本土快乐生活</div>
<div class="tab_b" id="tab_a3" style="display:none;">适时新闻滚动</div>
<div class="tab_b" id="tab_a4" style="display:none;">期待完美假日</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 #Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 #Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 #Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 #Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 #Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 #Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 #Javascript
You might like
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
python dict remove数组删除(del,pop)
2013/03/24 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python如何将图片转换为字符图片
2020/08/19 Python
django ajax json的实例代码
2018/05/29 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
最新自我评价范文
2013/11/16 职场文书
出纳岗位职责模板
2013/11/27 职场文书
实习评语大全
2014/04/26 职场文书
电子商务专业求职信
2014/07/10 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
员工离职感谢信
2015/01/22 职场文书
主持人大赛开场白
2015/05/29 职场文书
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技