一、tab切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        .item{

            width: 300px;

            background-color: #2459a2;

            height:38px;

            line-height: 38px;

        }

        .menu{

            float:left;

            border-right:1px solid blue;

            padding: 10px;

            color: white;

            cursor: pointer;

        }

        .hide{

            display: none;

        }

        .active{

            background-color: blue;

        }

    </style>

</head>

<body>

<div class="item">

    <div class="menu active">菜单一</div>

    <div class="menu">菜单二</div>

    <div class="menu">菜单三</div>

</div>

<div class="content">

    <div class="info">内容一</div>

    <div class="info hide">内容二</div>

    <div class="info hide">内容三</div>

</div>

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

<script>

    $(".menu").click(function(){

        var i = $(this).index();

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

        $(".info").eq(i).show().siblings().hide();

    });

</script>

</body>

</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. CAD绘制扶手5.6

    用PL命令绘制出扶手的位置,如图 , “楼梯其他”“添加扶手”选择这条线,扶手宽度60,高度900,中间对齐.生成如图: 三维:

  2. LY.JAVA.DAY12.String类

    2018-07-24 14:06:03 String类概述 字符串是由多个字符组成一串数据(字符序列) 字符串可以看成字符数组 一旦被赋值就不能被改变    值不能变 1.过程概述: 方法区---字符 ...

  3. Linux电源管理-Linux regulator framework概述

    前言 1.  什么是regulator?      regulator翻译为"调节器",分为voltage regulator(电压调节器)和current(电流调节器).一般电源 ...

  4. unity中让物体移动到鼠标点击地面任一点的位置（单击移动和双击暂停移动）并生成图标

    using UnityEngine; using System.Collections.Generic; using UnityEngine.EventSystems; using UnityEngi ...

  5. day28 黏包及黏包解决方案

    今日主要内容: 一 .缓冲区 二.两种黏包现象 三.黏包现象的两种解决方案 四.打印进度条(补充的,了解即可) 1. 缓冲区 缓冲区的作用 : 将程序和网络解耦(这样做的好处是程序不会以为网速的快慢而 ...

  6. UIScrollview的 约束 contentsize contentoffset contentinset layoutsubviews needlayout等影响布局的属性

    很久没有写视图布局,最近发现写布局很不顺手,总结一下在处理UIScrollview的时候种种注意事项: 1. self.automaticallyAdjustsScrollViewInsets = N ...

  7. 驱动链表（LIST_ENTRY）

    DDK提供了两种链表的数据结构,双向链表和单向链表,其定义如下: typedef struct _LIST_ENTRY { struct _LIST_ENTRY *Flink; struct _LIS ...

  8. [ZJOI2008]泡泡堂BNB

    这个题...是一道神奇的贪心题... 根据田忌赛马的原理... 先假使两队都符合田忌和齐王的配置... 我们可以发现如果我们用当前最弱的...去和对方当前最强的打... 然后一直按照这个方案...当我 ...

  9. Codeforces Round #496 (Div. 3 ) E1. Median on Segments (Permutations Edition)（中位数计数）

    E1. Median on Segments (Permutations Edition) time limit per test 3 seconds memory limit per test 25 ...

  10. Spring学习五（JDBC支持）

    Spring的jdbc支持 1配置db.properties,将有关JDBC的信息载入 2bean文件配置数据源,这里用e3p0作为数据源载入db.properties 3配置template的bea ...