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 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
vue data引入本地图片的两种方式小结
Nov 13 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
无线电的诞生过程
2021/03/01 无线电
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
tsconfig.json配置详解
2019/05/17 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
python实现识别相似图片小结
2016/02/22 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
python实现一组典型数据格式转换
2018/12/15 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
python实现视频分帧效果
2019/05/31 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
小区消防演习方案
2014/02/21 职场文书
廉洁自律承诺书
2014/03/27 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
谢师宴家长致辞
2015/07/27 职场文书
财务管理制度范本
2015/08/04 职场文书
创业计划之特色精品店
2019/08/12 职场文书