js实现类似菜单风格的TAB选项卡效果代码


Posted in Javascript onAugust 28, 2015

本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码。分享给大家供大家参考。具体如下:

这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再次美化这上选项卡,风格有点类似于菜单。

运行效果截图如下:

js实现类似菜单风格的TAB选项卡效果代码

在线演示地址如下:

具体代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>一组简洁选项卡代码</title>
<style type="text/css">
<!--
body,div,ul,li{padding:0;margin:0;text-align:center;}
body{font:12px "宋体";text-align:center;}
a:link,a:visited{color:#00F;text-decoration:none;}
a:hover,a:active{color:#c00;text-decoration:underline;}
ul{ list-style:none;}
.box{margin:1em auto;}
br{clear:both;}
/*菜单class*/
.Menubox{width:960px;background:#eff8fe;border-bottom:2px #9bcff7 solid;height:36px;line-height:36px; border-top: none;}
.Menubox li{float:left;display:block;cursor:pointer;width:114px;border-right:0px #cccccc solid;text-align:center;color:#0099cc;font-weight:bold;font-size:14px; border-top: 2px solid #98d0f7; border-right: 2px solid #98d0f7;}
.Menubox li.hover{background:#fff;width:116px;border:2px solid #98d0f7;border-bottom:0px solid #fff;color:#dc0004;font-weight:bold;height:36px;line-height:36px;font-size:14px; border-right: 2px solid #98d0f7; border-left: none;}
.Menubox li.out{border-top:1px #cccccc solid;}
.Contentbox{width:956px;clear:both;border:2px solid #98d0f7;border-top:0;height:150px;line-height:150px;text-align:center;padding-top:8px;}
.Contentbox span{color:#ccc;}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
 var menu=document.getElementById(name+i);
 var con=document.getElementById("con_"+name+"_"+i);
 menu.className=i==cursel?"hover":"";
 con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>
</head>
<body>
<div class="box">
<!-- 点击切换1 begin -->
<div class="Menubox">
<ul><li style="color:#000000; width:180px">请选择支付方式</li>
  <li id="two1" onClick="setTab('two',1,4)" class="hover">连心卡</li>
  <li id="two2" onClick="setTab('two',2,4)" >储蓄卡</li>
  <li id="two3" onClick="setTab('two',3,4)" >信用卡</li>
  <li id="two4" onClick="setTab('two',4,4)" >消费卡</li>
</ul>
</div>
<div class="Contentbox">
  <p id="con_two_1" >标题列表1<span>(点击切换)</span></p>
  <p id="con_two_2" style="display:none">标题列表2<span>(点击切换)</span></p>
  <p id="con_two_3" style="display:none">标题列表3<span>(点击切换)</span></p>
  <p id="con_two_4" style="display:none">标题列表4<span>(点击切换)</span></p>
</div>
<br />
</div>
</body>
</html>

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

Javascript 相关文章推荐
jquery each()源代码
Feb 14 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
js实现搜索栏效果
Nov 16 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 #Javascript
Angular Js文件上传之form-data
Aug 28 #Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 #Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 #Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 #Javascript
js实现显示当前状态的导航效果代码
Aug 28 #Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 #Javascript
You might like
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
环境工程毕业生自荐信
2013/11/17 职场文书
教师学习培训邀请函
2014/02/04 职场文书
低碳环保口号
2014/06/12 职场文书
工程安全生产协议书
2014/11/21 职场文书
2014年环保局工作总结
2014/12/11 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server
SQLServer常见数学函数梳理总结
2022/08/05 MySQL