<!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. NYOJ37-回文字符串(dp)

    37-回文字符串 内存限制:64MB 时间限制:3000ms 特判: No通过数:88 提交数:177 难度:4 题目描述: 所谓回文字符串,就是一个字符串,从左到右读和从右到左读是完全一样的,比如& ...

  2. ES6-你不知道的箭头函数

    一谈到ES6的箭头函数,大家可能想到的优点就是语法更简洁,因为去掉了return.function.{}等输入. 但是设计者果真就是出于简洁的目的推出的箭头函数吗?显然不是.   => 箭头函数 ...

  3. 上位机与三菱FX3U通过FX-232-BD通信

    PLC侧设置: 和校验+协议4 读D200单字: 05 30 30 46 46 57 52 30 44 30 32 30 30 30 31     返回“201”:02 30 30 46 46 30 ...

  4. linux下安装zabbix

    1.安装源:sudo rpm -ivh http://repo.zabbix.com/zabbix/3.2/rhel/6/i386/zabbix-release-3.2-1.el6.noarch.rp ...

  5. 《Orange‘s》FAT12文件系统

    FAT12 层次 扇区(Sector):磁盘上的最小数据单元 簇(Cluster):一个或多个扇区 分区(Partition):通常指整个文件系统 引导扇区 引导扇区是整块软盘的第0个扇区,在这个扇区 ...

  6. java中null是什么，以及使用中要注意的事项

    1.null既不是对象也不是一种类型,它仅是一种特殊的值,你可以将其赋予任何引用类型,你也可以将null转化成任何类型,例如: Integer i=null; Float f=null; String ...

  7. uvm_scoreboard

    http://www.eetop.cn/blog/index.php?uid/13812/action/viewspace/itemid/6826765/php/1 uvm_in_order_comp ...

  8. 100-days: twenty-four

    Title: No word of a lie: scientists rate(评出) the world's biggest peddlers of bull(说瞎话的人,扯淡的人) bullsh ...

  9. LAB8 android

    妈的,标签名字能改成自己的名字,我也是个神人嘞. 明明是去掉两个括号,怎么变成3个了,醉了. 点组件,attribute,可以修改对应的值.非常直观?. content_mail.XML要设置ID才能 ...

  10. VS2017用正则表达式替换多行代码

    await IndexManyAsync\(item.Value, item.Key, "doc"\);\r\n.*\}.*\r\n.*\} 上面的代码,匹配的是下面的代码 awa ...