1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         *{ padding:0;margin: 0;}
  8.         .example{ width: 500px;height: 400px; margin: 50px auto 0 auto; }
  9.         #mytab{ width: 100px; float: left; border-left: 1px solid lightgray; border-bottom:1px solid lightgray;}
  10.         #mytab li{ list-style-type: none;  border-top: 1px solid lightgray; border-right:1px solid lightgray;height: 30px;line-height: 30px;text-align: center;}
  11.         #mytab li.active{ border-right:1px solid #ffffff;}
  12.         #mytabContent{float: left;}
  13.         #mytabContent div{ display: none;}
  14.         #mytabContent div.active{display: block;}
  15.         #mytabContent div p{padding: 10px;}
  16.     </style>
  17. </head>
  18. <body>
  19. <div class="example">
  20.     <ul id="mytab" class="nav">
  21.         <li class="active"><a>First</a></li>
  22.         <li><a>Second</a></li>
  23.         <li><a>Third</a></li>
  24.         <li><a>Fourth</a></li>
  25.     </ul>
  26.     <div id="mytabContent">
  27.         <div class="tab-pane active">
  28.             <p>This is First</p>
  29.         </div>
  30.         <div class="tab-pane">
  31.             <p>This is Second</p>
  32.         </div>
  33.         <div class="tab-pane">
  34.             <p>This is Third</p>
  35.         </div>
  36.         <div class="tab-pane">
  37.             <p>This is Fourth</p>
  38.         </div>
  39.     </div>
  40. </div>
  41. <script src="js/jquery-1.11.0.min.js"></script>
  42. <script>
  43.     $(function(){
  44.         $("#mytab").find("li").click(function(){
  45.             $(this)
  46.                     .siblings("li")
  47.                     .removeClass("active")
  48.                     .end()
  49.                     .addClass("active");
  50.  
  51.             var index=  $("#mytab").find("li").index($(this));
  52.             if(index>=0){
  53.                 var targetContent=$("#mytabContent").find("div").eq(index);
  54.                 targetContent
  55.                         .siblings("div")
  56.                         .removeClass("active")
  57.                         .end()
  58.                         .addClass("active");
  59.             }else
  60.             {
  61.                 alert("nima");
  62.             }
  63.  
  64.         });
  65.     });
  66. </script>
  67. </body>
  68. </html>

简单竖向Tab选项卡的更多相关文章

  1. Jquery 简单的Tab选项卡特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery简单实现tab选项卡效果

    html: <ul class="tab"> <li>最新</li> <li class="cur">热门< ...

  3. js 实现tab选项卡

    最近一直在研究js  如果不及时复习的话前边学到的东西很快就会忘掉,所以把前段时间的一个简单的tab选项卡的思路写出来也算复习了一下吧, 第一步:先把布局写出来: <div id="d ...

  4. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  5. 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

  6. jQery简单Tab选项卡效果

    简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  7. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  8. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  9. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

随机推荐

  1. 微信公众平台Js API（WeixinApi）

    微信公众平台Js API(WeixinApi): https://github.com/zxlie/WeixinApi#user-content-3%E9%9A%90%E8%97%8F%E5%BA%9 ...

  2. MLlib-协同过滤

    协同过滤 显示vs隐式反馈 参数调整 实例 教程 协同过滤 协同过滤是推荐系统的常用方法.可以填充user-item相关矩阵中的缺失值.MLlib支持基于模型的协同过滤,即使用能够预测缺失值的一个隐藏 ...

  3. ServiceStack.OrmLite

    ServiceStack.OrmLite 谈谈我的入门级实体框架Loogn.OrmLite   每次看到有新的ORM的时候,我总会留意一下,因为自己也写过一个这样的框架,人总是有比较之心的.我可能会d ...

  4. Solr In Action 笔记(2) 之 评分机制(相似性计算)

    Solr In Action 笔记(2) 之评分机制(相似性计算) 1 简述 我们对搜索引擎进行查询时候,很少会有人进行翻页操作.这就要求我们对索引的内容提取具有高度的匹配性,这就搜索引擎文档的相似性 ...

  5. API风格

    Client------------ Request ----------------->多Server端 Server------------------------------------- ...

  6. hdu 5124 lines

    http://acm.hdu.edu.cn/showproblem.php?pid=5124 题意:给你n条线段,然后找出一个被最多条线段覆盖的点,输出覆盖这个点的线段的条数. 思路:可以把一条线段分 ...

  7. C51 库函数(1)

    C-51软件包的库包含标准的应用程序,每个函数都在相应的头文件(.h)中有原型声明.如果使用库函数,必须在源程序中用预编译指令定义与该函数相关的头文件(包含了该函数的原型声明).例如: #includ ...

  8. bit和sbit的区别

    1．bit和sbit都是C51扩展的变量类型. bit和int char之类的差不多,只不过char=8位, bit=1位而已.都是变量,编译器在编译过程中分配地址.除非你指定,否则这个地址是随机的. ...

  9. Android应用开发学习笔记之多线程与Handler消息处理机制

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 和JAVA一样,Android下我们可以通过创建一个Thread对象实现多线程.Thread类有多个构造函数,一般通 ...

  10. COJN 0484 800502电池的寿命

    800502电池的寿命 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 小S新买了一个掌上游戏机,这个游戏机由两节5号电池供电. ...