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利用Array.splice实现Array的insert/remove
Jan 13 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
vue组件入门知识全梳理
Sep 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使用file_get_content设置头信息的方法
2016/02/14 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
高二地理教学反思
2014/01/24 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
六年级学生期末评语
2014/12/26 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
团日活动总结格式
2015/05/11 职场文书
小学校园广播稿
2015/08/18 职场文书