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 常用校验函数
Mar 26 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
浅谈angularjs中响应回车事件
Apr 24 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
JQuery animate动画应用示例
May 14 jQuery
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 PDO的一些认识小结
2015/01/23 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
pandas值替换方法
2018/07/10 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
Python测试线程应用程序过程解析
2019/12/31 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
python爬取微博评论的实例讲解
2021/01/15 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
室内设计自我鉴定
2013/10/15 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
化工生产实习心得体会
2016/01/22 职场文书