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 实现完美include载入实现代码
Aug 05 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
localStorage实现便签小程序
Nov 28 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
js实现小时钟效果
Mar 25 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连接access数据库
2008/03/27 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
python range实例用法分享
2020/02/06 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
学前班教师的自我鉴定
2013/12/05 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
三年级学生评语
2014/04/23 职场文书
社区先进事迹材料
2014/05/19 职场文书
社会工作专业求职信
2014/07/15 职场文书
作风转变心得体会
2014/09/02 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby