<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{ padding:0;margin: 0;}

        .example{ width: 500px;height: 400px; margin: 50px auto 0 auto; }

        #mytab{ width: 100px; float: left; border-left: 1px solid lightgray; border-bottom:1px solid lightgray;}

        #mytab li{ list-style-type: none;  border-top: 1px solid lightgray; border-right:1px solid lightgray;height: 30px;line-height: 30px;text-align: center;}

        #mytab li.active{ border-right:1px solid #ffffff;}

        #mytabContent{float: left;}

        #mytabContent div{ display: none;}

        #mytabContent div.active{display: block;}

        #mytabContent div p{padding: 10px;}

    </style>

</head>

<body>

<div class="example">

    <ul id="mytab" class="nav">

        <li class="active"><a>First</a></li>

        <li><a>Second</a></li>

        <li><a>Third</a></li>

        <li><a>Fourth</a></li>

    </ul>

    <div id="mytabContent">

        <div class="tab-pane active">

            <p>This is First</p>

        </div>

        <div class="tab-pane">

            <p>This is Second</p>

        </div>

        <div class="tab-pane">

            <p>This is Third</p>

        </div>

        <div class="tab-pane">

            <p>This is Fourth</p>

        </div>

    </div>

</div>

<script src="js/jquery-1.11.0.min.js"></script>

<script>

    $(function(){

        $("#mytab").find("li").click(function(){

            $(this)

                    .siblings("li")

                    .removeClass("active")

                    .end()

                    .addClass("active");

            var index=  $("#mytab").find("li").index($(this));

            if(index>=0){

                var targetContent=$("#mytabContent").find("div").eq(index);

                targetContent

                        .siblings("div")

                        .removeClass("active")

                        .end()

                        .addClass("active");

            }else

            {

                alert("nima");

            }

        });

    });

</script>

</body>

</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. bzoj4160: [Neerc2009]Exclusive Access 2

    Description 给出 N 个点M 条边的无向图,定向得到有向无环图,使得最长路最短. N ≤ 15, M ≤ 100 Input 第一行一个数M (1≤M≤100). 接下来M行,每行两个大写 ...

  2. Android 数据库读取数据显示优化 Application [6]

    Application和Activity,Service一样是android框架的一个系统组件, 当android程序启动时系统会创建一个application对象,用来存储系统的一些信息. 通常我们 ...

  3. Egret 文本处理

    常规处理: private createGameScene():void { var shp = new egret.Shape(); shp.graphics.beginFill(0xff0000, ...

  4. 洛谷 P1331 海战

    传送门 题解:由于船是方形的,所以比较简单.但是考试的时候跪了,orz.忘了考虑类似一圈井号中间有一摊水.          可以只考虑这个点上方和左边点的情况,这样分为四种情况.一种是左边是一滩水, ...

  5. 谈谈依赖注入DI

    控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控制反转一般分为两种类型,依赖注入 ...

  6. 运维小东西：每天备份sql到远程服务器上

    首先两台服务器可以无密码登录(这个方式比较简单,当然安全系数会降低) #ssh-keygen -t rsa #生成密钥发送给远程服务器上 #ssh-copy-id ~/root/id_rsa.pub ...

  7. STM8S学习笔记-时钟控制1

    1.图13可见,STM8S单片机主要有四种时钟源可供选择: 1).1-24MHz外部晶体振荡器(HSE). 2).最大24MHz外部时钟(HSE ext). 3).16MHz高速内部RC振荡器(HSI ...

  8. ISO7816协议的块传输协议

    1.块传输协议中的前三个字节是强制必须有的 NAD节点地址: 当终端支持多个卡槽,终端和这些卡槽以总线的方式通讯时,该字节有用,其他情况下,默认为0 bit1-3:定义了源地址 bit5-7:定义了目 ...

  9. android 状态栏(StatusBar)

    一.SystemUI 概述 自 android2.2 开始 , 原本存在与 framework-res.apk 中的状态栏和下拉通知栏界面控制被分割出一个单独的 apk 文件 , 命名为 System ...

  10. 哈希集合——hashSet

    /**     哈希集合特点:存取顺序不确定,同一个哈希值的位置可以存放多个元素,                   哈希集合存放元素的时候是先判断哈希地址值:hashCode()是否相同,如果不同 ...