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 相关文章推荐
javascript倒计时功能实现代码
Jun 07 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
javascript自定义的addClass()方法
May 28 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
用js实现博客打赏功能
Oct 24 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
用p5.js制作烟花特效的示例代码
Mar 21 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP中echo和print的区别
2014/08/28 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python中if及if-else如何使用
2020/06/02 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
PHP面试题大全
2015/10/16 面试题
护理专业自荐信范文
2014/02/26 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
副总经理岗位职责
2015/02/02 职场文书
用Python实现屏幕截图详解
2022/01/22 Python