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加密解密字符串可自定义密码因子
May 13 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
Javascript中神奇的this
Jan 20 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
如何使用Javascript中的this关键字
May 28 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
PHP实现远程下载文件到本地
2015/05/17 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
Three.js快速入门教程
2016/09/09 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
VUE安装使用教程详解
2019/06/03 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
对Python 语音识别框架详解
2018/12/24 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
python datetime中strptime用法详解
2019/08/29 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python怎么判断模块安装完成
2020/06/19 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
医科大学生毕业的自我评价分享
2013/11/12 职场文书
小学教师师德整改措施
2014/09/29 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
k8s部署redis cluster集群的实现
2021/06/24 Redis
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
Python正则表达式中flags参数的实例详解
2022/04/01 Python
Java 定时任务技术趋势简介
2022/05/04 Java/Android
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL