1. 程式人生 > >前端tab切換 和 validatejs表單驗證外掛

前端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{
            width: 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