zoukankan      html  css  js  c++  java
  • 前端tab切换 和 validatejs表单验证插件

    一、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{
                 300px;
                background-color: #2459a2;
                height:38px;
                line-height: 38px;
            }
            .menu{
                float:left;
                border-right:1px solid blue;
                padding:0 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

  • 相关阅读:
    网络编程_UDP协议_发送端与接收端
    网络编程_IP对象_InetAddress
    Java对XML文件解析方式之一_SAX
    GUI练习3
    GUI_菜单练习
    GUI_文件管理器(练习)
    HTTP数据组织方式
    web前端面试题
    19-字符串匹配(kmp || substr,find)
    17-逆序数(树状数组+离散)
  • 原文地址:https://www.cnblogs.com/di2wu/p/10041748.html
Copyright © 2011-2022 走看看