一、tab切换

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <style>
  8.         .item{
  9.             width: 300px;
  10.             background-color: #2459a2;
  11.             height:38px;
  12.             line-height: 38px;
  13.         }
  14.         .menu{
  15.             float:left;
  16.             border-right:1px solid blue;
  17.             padding: 10px;
  18.             color: white;
  19.             cursor: pointer;
  20.         }
  21.         .hide{
  22.             display: none;
  23.         }
  24.         .active{
  25.             background-color: blue;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.  
  31. <div class="item">
  32.     <div class="menu active">菜单一</div>
  33.     <div class="menu">菜单二</div>
  34.     <div class="menu">菜单三</div>
  35. </div>
  36.  
  37. <div class="content">
  38.     <div class="info">内容一</div>
  39.     <div class="info hide">内容二</div>
  40.     <div class="info hide">内容三</div>
  41. </div>
  42.  
  43. <script src="jquery.js"></script>
  44. <script>
  45.     $(".menu").click(function(){
  46.         var i = $(this).index();
  47.         $(this).addClass('active').siblings().removeClass('active');
  48.         $(".info").eq(i).show().siblings().hide();
  49.     });
  50. </script>
  51. </body>
  52. </html>

二、validatejs表单验证插件的使用

推荐看教程

　　http://www.runoob.com/jquery/jquery-plugin-validate.html

前端tab切换 和 validatejs表单验证插件的更多相关文章

  1. 前端编程提高之旅（十）----表单验证插件与cookie插件

        实际项目开发中与用户交互的常见手法就是採用表单的形式.取得用户注冊.登录等信息.而当用户注冊或登录后又须要记住用户的登录状态.这就涉及到经常使用的两个操作:表单验证与cookie增删查找.   ...

  2. 【前端_js】Bootstrap之表单验证

    Bootstrap表单验证插件bootstrapValidator使用方法整理 BootstrapValidator 表单验证超详细教程    

  3. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  4. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  5. JS表单验证插件(支持Ajax验证)

    自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:ru ...

  6. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  7. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  8. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  9. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

随机推荐

  1. 异步socket处理

    服务器端: #include <boost/thread.hpp> #include <boost/asio.hpp> #include <boost/date_time ...

  2. CAD（布置厨洁具）（尺寸标注）5.12

    "TYTK"打开图库,找到平面厨具和洁具.双击选中的厨具,A可以不停旋转90度.给厨具选取正确的位置.画出灶台线,同理画出卫生间的家具.绘制出洗脸台的平台.浴缸的平台. 尺寸标注: ...

  3. WINDOWS 端口查看

    查看Windows下所有使用的端口 netstat -ano 查看Windows下某一个特定的端口 netstat -ano | find "8080"   查看windows下所 ...

  4. Win10系列：UWP界面布局进阶8

    StackPanel StackPanel能够以水平或垂直的方式整齐地排列位于其内部的元素.通过设置StackPanel的Orientation属性可以定义内部元素的排列方式,当将Orientatio ...

  5. Win10系列：UWP界面布局基础1

    随着技术的不断发展,使用者对应用程序的界面体验提出了更高的要求,为了应对越来越复杂的界面设计需求和有效的简化界面开发过程,微软公司在其应用程序的开发技术当中引入一套新的应用程序界面描述语言,这就是XA ...

  6. Win10系列：WinJS库控件

    在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...

  7. flask-admin有用的例子

    flask-admin主页: https://github.com/flask-admin/flask-admin flask-admin克隆地址: https://github.com/flask- ...

  8. Java 安装后的检测是否安装成功

    下载安装JDK(Java SE development Kit) Java是有sun公司发行的编程语言,JDK的官方下载地址为:http\\ java.sun.com 昨天选择下载的是jdk-8u10 ...

  9. VSTO：使用C#开发Excel、Word【4】

    <Visual Studio Tools for Office: Using C# with Excel, Word, Outlook, and InfoPath >——By Eric C ...

  10. Invalid MEX-file: caffe.mexa64 的解决方案

    http://blog.csdn.net/iamzhangzhuping/article/details/53105708