<html>
<head>
<title> 用户验证 </title>
<script type="text/javascript" src="jquery-1.4.2.min.js">
</script>
<script>
$(function(){
$(":input.reg").each(function(){
var $a=$("<strong>*</strong>");
$(this).parent().append($a);
});
$(":input.reg").blur(function(){
if($(this).is("#username")){
$(".user").remove();
if(this.value=='' || this.length>6){
var $msg=$("<span class='user'>用户名至少4个字符</span>");
$(this).parent().append($msg);
}
else{
var $msg=$("<span class='user'>用户名合法</span>");
$(this).parent().append($msg);
}
}
if($(this).is("#email")){
$(".em").remove();
var reg=/^\w{1,}@\w+\.\w+$/;
var $email=$(this).val();
if(!reg.test($email)){
var $msg=$("<span class='em'>邮箱不合法</span>");
$(this).parent().append($msg);
}
else{
var $msg=$("<span class='em'>邮箱合法</span>");
$(this).parent().append($msg);
}
}
});
});
</script>
<style>
</style>
</head>
<body>
<form action="#" class="form1" method="post">
<div>用户名：<input type="text" id="username" class="reg"></div><br>
<div>邮箱：<input type="text" id="email" class="reg"></div><br>
<input type="button" class="bu" value="提交">
</form>
</body>
</html>
2.
<meta charset="utf-8">
<html>
<head>
<title> 显示更多 </title>
<style>
*{margin:0;padding:0;}
body{font-size:20px;text-align:center;}
.tab_list{margin-left:600px;}
.tab_list ul li{margin:20px auto; list-style:none; width:50px;float:left; line-height:30px; border:1px solid gray; cursor:pointer;}
.tab_content{clear:both;}
.select-li{background-color:gray;}
.hide{display:none;}
.hover{background-color:green;}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js">
</script>
<script>
$(function(){
/*
$(".tab-content div").hide();
$(".tab-list ul li:eq(0)").click(function(){
$(".tab-content div:eq(0)").show();
});
$(".tab-list ul li:eq(1)").click(function(){
$(".tab-content div").hide();
$(".tab-content div:eq(1)").show();
});
$(".tab-list ul li:eq(2)").click(function(){
$(".tab-content div").hide();
$(".tab-content div:eq(2)").show();
});
*/
/*获取所有 li
var $li=$("div.tab-list ul li");
$li.click(function(){
//index() 对象集合的 $li 的方法 参数为获取当前对象的索引
//eq()也是对象的方法
var $index=$li.index($(this));
$(".tab-content div").eq($index).show().siblings().hide();
$(this).addClass("select-li").siblings().removeClass("select-li");
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
*/
var $li=$(".tab_list ul li");
$li.click(function(){
var $index=$li.index($(this));
$(".tab_content div").eq($index).show().siblings().hide();
$(this).addClass("select-li");
$(this).siblings().removeClass("select-li");
});
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li>体育</li>
<li>时事</li>
<li>八卦</li>
</ul>
</div>
<div class="tab_content">
<div>体育</div>
<div class="hide">时事</div>
<div class="hide">八卦</div>
</div>
</div>
</body>
</html>
3429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
