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 相关文章推荐
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
js仿360开机效果
Dec 26 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读取xml实例代码
2010/01/28 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
初中音乐教学反思
2014/01/12 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
处罚决定书范文
2015/06/24 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python