<!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. hadoop streaming 中跑python程序，自定义模块的导入

    今天在做代码重构,以前将所有python文件放到一个文件夹下,上传到hadoop上跑,没有问题:不过随着任务的复杂性增加,感觉这样甚是不合理,于是做了个重构,建了好几个包存放不同功能的python文件 ...

  2. Alpha冲刺

    第一天 日期:2018/6/16 1.今日完成任务情况以及遇到的问题 张天旭:根据系统的需求,完成数据库的设计 周甜甜:完成系统后台登录界面的设计及登录功能的实现 李蕾:完成系统后台首页的设计 张海鑫 ...

  3. 从数据类型 varchar 转换为 numeric 时出错.

    如果说你的数据库字段是varchar,但是存储的数据是数值,在出报表时需要转成int或numeric时,无论怎么样都报错. 错误信息: 消息 8114,级别 16,状态 5,第 1 行 从数据类型 v ...

  4. Unity3D人脸建模 AvataSDK研究

    1.Unity与windows交互 调用文件浏览器 1.用C#调用comdlg32.dll  ,  利用GetOpenFileName实现打开文件对话框 <1> 整体参考https://w ...

  5. Form-encoded method must contain at least one @Field.

    https://blog.csdn.net/liunian823/article/details/80290855 记得之前遇到过这个问题,并且记录笔记了,这次再翻笔记,却没有找到...搜索 了下. ...

  6. css入门第一天

    一丶Web标准Web标准不是某一个标准,而是一系列标准的集合,内容与结构与表现形式的分离网页主要有四个部分组成:内容(content),结构(structure), 表现(presentation)和 ...

  7. CodeWarrior 10 添加/修改 头文件路径

    当使用CodeWarrior 10时,默认使用大名鼎鼎的GCC编译器. 我们在构建工程的时候,往往按模块分类文件夹,那么就存在需要包含头文件路径的问题.那么如何加入头文件的路径呢?见下文. 1.打开工 ...

  8. Selenium 实现nvsm查询和输出ksql语句

    测试环境:http://nvsm.cnki.net/kns/brief/result.aspx?dbprefix=SCDB 程序功能:对各个文献库的高级检索功能,输入检索条件做检索,提取加密的ksql ...

  9. Vue如何更新子组件

    黑科技: 给子组件绑定一个key值,当key值改变时,子组件就会更新 ~

  10. Python开发【第九篇】：协程、异步IO

    协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是协程,协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切换回 ...