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 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
js实现汉字排序的方法
Jul 23 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
JS setTimeout与setInterval的区别
Apr 20 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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
countup.js实现数字动态叠加效果
2019/10/17 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
python数组循环处理方法
2019/08/26 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
文员个人求职自荐信
2013/09/21 职场文书
回门宴答谢词
2014/01/13 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
个人委托书如何写
2014/09/25 职场文书
技术股份合作协议书
2014/10/05 职场文书
车辆年检委托书范本
2014/10/14 职场文书
小学教师读书笔记
2015/07/01 职场文书