<!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. C/C++控制台接收不到鼠标消息-【解决办法】

    控制台编程中,使用了鼠标操作,遇到了控制台无法接收到鼠标消息的问题,可尝试一下办法解决 [win10系统] 在控制台标题栏右键-默认值-选项,将一下对勾取消 然后调用如下函数: HANDLE hIn ...

  2. 安装 mongo 4.0

    Centos 使用yum安装MongoDB 4.0 1.配置MongoDB的yum源 创建yum源文件: #touch /etc/yum.repos.d/mongodb-org-4.0.repo 添加 ...

  3. Linux - 用户权限相关命令

    用户权限相关命令 目标 用户 和 权限 的基本概念 用户管理 终端命令 组管理 终端命令 修改权限 终端命令 01. 用户 和 权限 的基本概念 1.1 基本概念 用户 是 Linux 系统工作中重要 ...

  4. 卷积神经网络系列之softmax，softmax loss和cross entropy的讲解

    我们知道卷积神经网络(CNN)在图像领域的应用已经非常广泛了,一般一个CNN网络主要包含卷积层,池化层(pooling),全连接层,损失层等.虽然现在已经开源了很多深度学习框架(比如MxNet,Caf ...

  5. 第一个spring简单的helloworld

    spring 是一个开源的框架 也是轻量级框架 1.导入jar包 spring的版本 4.0 目录: spring-framework-4.0.0.RELEASE-libs 下的jar  spring ...

  6. 关于@JsonIgnore的理解

    首先:@JsonIgnore是一个能够在后端发送给前端数据的时候对后端发送出的json字符串能够发挥作用的一个注解 如果比如user表,你在password这个属性上添加@JsonIgnore,就会s ...

  7. Eclipse常用快捷键--摘录他人

    Eclipse常用快捷键 1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/) 快速修正:Ctrl+1 单词补全:Alt+/ 打开外部Java文档:Shift+F2显示 ...

  8. 十三、实现Comparable接口和new Comparator<T>(){ }排序的实现过程

    参考:https://www.cnblogs.com/igoodful/p/9517784.html Collections有两种比较规则方式,第一种是使用自身的比较规则: 该类必须实现Compara ...

  9. JS练习第三课

    用typeof查看数据类型 <pre> <script type="text/javascript"> alert(typeof 12345); <s ...

  10. MySQL千万级数据库查询怎么提高查询效率

    在实际项目中,当MySQL表的数据达到百万级别时候,普通查询效率直线下降,而且当使用的where条件较多,其查询效率是让人无法容忍的.假如一个taobao订单查询详情要几十秒,可想而知的用户体验是多差 ...