<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>tab</title>

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

         <style>

             .active{

                 background: yellow;

             }

             #contents div{

                 width: 200px;

                 height: 200px;

                 background: #ccc;

                 border: 1px solid #999;

                 display: none;

             }

         </style>

     </head>

     <body>

         <input type="button" value="教育" class="active" />

         <input type="button" value="培训" />

         <input type="button" value="招生" />

         <input type="button" value="出国" />

         <div id="contents">

             <div style="display: block;">1111</div>

             <div>2222</div>

             <div>3333</div>

             <div>4444</div>

         </div>

         <script>

             $('input').click(function(){

                 $(this).addClass('active').siblings().removeClass('active');

                 $('#contents>div').eq($(this).index()).show().siblings().hide();

             });

         </script>

     </body>

 </html>

tab选项卡--jq的更多相关文章

  1. tab选项卡-jQuery

    上次用原生的js写了个tab选项卡   这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...

  2. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

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

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

  4. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  5. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

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

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

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

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

  8. 工作当中实际运用（1）——tab选项卡

    不废话 直接上代码: tab选项卡 window.onload=function(){ var titles= document.getElementById('header-dh').getElem ...

  9. 各种效果的tab选项卡

    ;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...

随机推荐

  1. 手机访问电脑端Wampserver2.4-x64服务

    我用的Wampserver2.4-x64 1. 先确保你的手机和电脑连在同一个局域网内. 2. Window + R, 然后输入 ipconfig,然后获取ip地址, 长这样: 192.168.XX. ...

  2. mysql访问视图提示:找不到视图

    原因: 1.不存在 2.视图区分大小写(有的不区分) 3.权限问题

  3. Beanstalkd消息队列 -- php类Pheanstalk使用

    业务场景 商城订单生成30分钟后 如果未支付关闭订单 解决办法 可以使用延迟消息队列   这里我们用的是beanstalkd Beanstalkd介绍 Beanstalk,一个高性能.轻量级的分布式内 ...

  4. 《Orange‘s》Loader

    Loader 作用 引导扇区只有512个字节,能做的事情很少,局限性太大.所以需要一个程序,通过引导扇区加载入内存,然后将控制权交给它,这样就突破了512字节的限制.这个程序便是loader. 加载过 ...

  5. 通信导论-IP数据网络基础（3）

    ICMP(IP辅助协议)--网际控制报文协议 ICMP报文种类:ICMP差错报文(终点不可达.时间超过等5种)和ICMP询问报文(回送请求和回答请求.时间戳请求和回答报文2种) ICMP是一种集差错报 ...

  6. Checked Uncheckd异常

    Checked : 你可以在写代码的时候就throw 或者try catch 的 Unchecked :  Error   + RuntimeException .提前无法预测的 http://www ...

  7. java使用ffmpeg实现上传视频的转码，提取视频的截图等功能

    ffmpeg视频采集功能非常强大,不仅可以采集视频采集卡或USB摄像头的图像,还可以进行屏幕录制,同时还支持以RTP方式将视频流传送给支持RTSP的流媒体服务器,支持直播应用. 1.能支持的格式 ff ...

  8. JAVA多线程之线程间的通信方式

    (转发) 收藏 记 周日,北京的天阳光明媚,9月,北京的秋格外肃穆透彻,望望窗外的湛蓝的天,心似透过栏杆,沐浴在这透亮清澈的蓝天里,那朵朵白云如同一朵棉絮,心意畅想....思绪外扬, 鱼和熊掌不可兼得 ...

  9. CSRedisCore 在net core中的使用

    背景:与net core配套的StackExchange.Redis客户端总是间歇性的发生timeout异常. 由complexer单例对象创建的IDatabase对象,在产生Timeout异常后会导 ...

  10. 使用tcpreply对DPDK进行压力测试（一台主机，2张网卡压测）

    使用tcpreply对DPDK进行压力测试 过往风萤 关注 2018.05.18 14:35* 字数 273 阅读 2评论 0喜欢 0 小公司没有testcenter之类的打流工具,并且内网流量比较小 ...