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 相关文章推荐
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
js实现适配移动端的拖动效果
Jan 13 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
javascript indexOf函数使用说明
2008/07/03 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
python感知机实现代码
2019/01/18 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
python 爬取疫情数据的源码
2020/02/09 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
广告设计专业自荐信范文
2013/11/14 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
股指期货心得体会
2014/09/10 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
优秀党员推荐材料
2014/12/18 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python