jQuery超简单选项卡完整实例


Posted in Javascript onSeptember 26, 2015

本文实例讲述了jQuery实现的超简单选项卡效果。分享给大家供大家参考。具体如下:

这是一款基于jQuery的选项卡示例,比较实用的一个实例,希望通过本文让大家掌握如何使用jQuery创建一个选项卡标签,这是目前WEB前端设计比较流行的一款功能。

运行效果截图如下:

jQuery超简单选项卡完整实例

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery选项卡实战</title>
<style>
*{margin:0; padding:0;font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px}
.ts{ width:50%; margin:0 auto}
.ts .tsHead{clear:both; height:27px;background:url(images/titLine.gif) repeat-x left bottom; border-left:1px solid #88AAD6; border-right:1px solid #88AAD6; border-top:1px solid #88AAD6}
.ts .titLeft{float:left; height:27px;font-size:1px; width:12px;;background:url(images/titLeft.gif) no-repeat}
.ts .titOp{float:left; height:21px; padding:5px 0 0}
.ts .titOp li{ float:left; width:100px;height:15px; padding:5px 0 0; margin:0 0 0 3px;border:1px solid #88AAD6; border-bottom:1px solid #fff;background:#eeeeff; color:#999;text-align:center; cursor:default}
.ts .titOp li.current{ background:#fff;color:#290052; }
.ts .titRight{float:right; height:26px;font-size:1px; width:32px;;background:url(images/titRight.gif) no-repeat}
.ts .line{border-left:1px solid #88AAD6;border-right:1px solid #88AAD6;clear:both; height:13px; line-height:13px; padding:5px; background:#E9F9FE}
.ts .tsMb{border:1px solid #88AAD6; border-top:none; padding:10px; height:120px; min-height:100px; font-weight:bold}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
$(function(){
 $("#tsMb div:not(:first)").hide();
 $("#titOp li").each(function(index){
 $(this).mouseover(
  function(){
  $("#titOp li.current").removeClass("current");
    $(this).addClass("current");
    $("#tsMb > div:visible").hide();
    $("#tsMb div:eq(" + index + ")").show();
  })
 })
})
</script>
</head>
<body>
 <div style="clear:both; height:30px"></div>
 <div class="ts">
  <div class="tsHead">
   <div class="titLeft"></div>
   <div class="titOp" id="titOp">
   <ul>
    <li class="current">脚本调试器</li>
    <li>样式调试器</li>
    <li>DOM调试器</li>
   </ul>
   </div>
   <div class="titRight"></div>
  </div>
  <div class="tsMb" id="tsMb">
  <div>脚本</div>
  <div>样式</div>
  <div>DOM</div>
  </div>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
function foo的原型与prototype属性解惑
Nov 19 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 Javascript
基于JavaScript实现年月日三级联动
Jun 22 Javascript
angularjs学习笔记之简单介绍
Sep 26 #Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 #Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 #Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 #Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 #Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 #Javascript
10个很棒的jQuery代码片段
Sep 24 #Javascript
You might like
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
php数组添加元素方法小结
2014/12/20 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
利用python如何处理nc数据详解
2018/05/23 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
新闻学专业个人求职信写作
2014/02/04 职场文书
小学庆六一活动方案
2014/02/28 职场文书
人口与计划生育责任书
2015/05/09 职场文书
画展观后感
2015/06/17 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python