jQuery 控制表单和表格
这里总结了jQuery中对表格和表单的一些常用操作, 通过这里的实例和操作肯定对jQuery的掌握有一个新得提高, 希望大家耐心看完, 多实践.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0; padding:0;border:none;}
form {width:800px;margin:auto;margin-top:40px;}
form legend {
margin-bottom:5px;
background: #eee;
color:#363636;
font-weight:bold;
display: block;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
padding:8px 15px;
}
form div {
margin-bottom:5px;
}
form input, form textarea{
border:1px solid #888;outline:none;
border-radius:3px;
}
form input {
width:174px;height:28px;line-height: 28px;padding:0 5px;
}
form textarea {
width:480px;line-height: 20px;
padding:5px;
}
form input.focus,form textarea.focus {
border:1px solid #878;
box-shadow: 0 0 4px rgba(3,3,3, 0.3);
}
form input[type="submit"], form input[type="reset"] {
width:80px;
margin-right:5px;
cursor:pointer;
}
</style>
</head>
<body>
<!-- 单行问本框应用 -->
<form action="">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username"> 名称:</label>
<input type="text" value="" id="username" name="username" />
</div>
<div>
<label for="pwd"> 密码:</label>
<input type="password" id="pwd" name="pwd" />
</div>
<div>
<label for="msg">详细信息:</label>
<textarea name="msg" id="msg" cols="30" rows="10"></textarea>
</div>
</fieldset>
</form>
<script src="../jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 需求
$("input,textarea").focus(function (){
$(this).addClass('focus');
}).blur(function () {
$(this).removeClass('focus');
})
})
</script> <!-- 多行文本框应用 -->
<style>
.msg-caption { }
.msg_caption span {
display: inline-block;*display:inline;*zoom:1;
height:26px;text-align: center;
color:#363636;
line-height: 26px;
padding:0 15px;
border:1px solid #dcdcdc;
cursor: pointer;
margin-right:5px;
}
.msg_caption span:last-child {
margin-right:0;
}
.msg_caption span:hover, .msg_caption span.active{
background: maroon;
color:#fff;
border:1px solid maroon;
}
.demo2 textarea {
height:100px;
}
</style>
<form class="demo2" action="">
<legend>多行文本框应用</legend>
<div class="msg_caption">
<span class="bigger">放大</span><span class="smaller">缩小</span><!--
--><span class="up">向上</span><span class="down">向下</span>
</div>
<textarea name="" id="msg2" cols="30" rows="10"></textarea>
</form>
<style>
.demo3 div.dv1 input {
width:0;height:0;
width:15px;height:15px;
display: inline-block;*display: inline;*zoom:1;
vertical-align: middle;
}
.demo3 div.dv1 label {
margin-right:35px;
height:20px;line-height: 20px;
font-size:12px;
display: inline-block;*display: inline;*zoom:1;
}
.demo3 div.dv1 {
margin-top:5px;
}
.demo3 div.dv2 input {
width:60px;
cursor:pointer;
}
</style>
<form class="demo3" action="">
<legend>复选框的应用</legend>
你爱好的运动是 ?<br/>
<div class="dv1">
<label for="items0"><input type="checkbox" id="items0" name="items" value="足 球" />足球</label><!--
--><label for="items1"><input type="checkbox" id="items1" name="items" value="篮 球" />篮球</label><!--
--><label for="items2"><input type="checkbox" id="items2" name="items" value="羽毛球" />羽毛球</label><!--
--><label for="items3"><input type="checkbox" id="items3" name="items" value="乒乓球" />乒乓球</label>
</div>
<div class="dv2">
<input type="button" value="全 选" id="checkAll" />
<input type="button" value="全不选" id="checkNone" />
<input type="button" value="反 选" id="checkReverse" />
<input type="button" value="提 交" id="sub_ckbtn" />
</div>
</form>
<script type="text/javascript">
$(function () {
(function () {
/* 1. 信息框高度的变化 */
var $bigger = $("span.bigger");
var $smaller = $("span.smaller");
var $msg = $("#msg2");
var $msgHeight = $msg.height();
$bigger.click(function () {
var h = $msg.height();
if(h<300) {
// $msg.height(h+50);
if(!$msg.is(":animated")) {
$msg.animate({"height":"+=50"}, "slow");
}
}
})
$smaller.click(function () {
var h = $msg.height();
if(h>100) {
// $msg.height(h-50);
if(!$msg.is(":animated")) {
$msg.animate({"height":"-=50"}, "slow");
}
}
}) /* 2. 信息框滚动条高度的变化 */
var $up = $("span.up");
var $down = $("span.down");
var $msgLineHeight = parseInt($msg.css('line-height').split('px')[0]);
$down.click(function () {
if(!$msg.is(":animated")) {
$msg.animate({"scrollTop":"+="+($msgHeight-$msgLineHeight)}, "slow");
}
})
$up.click(function (){
if(!$msg.is(":animated")) {
$msg.animate({"scrollTop":"-="+($msgHeight-$msgLineHeight)}, "slow");
}
}) /* 复选框操作 */
var $checkAll = $("#checkAll");
var $checkNone = $("#checkNone");
var $checkReverse = $("#checkReverse");
var $subCkBtn = $("#sub_ckbtn");
var $cks = $(".demo3 input[type=checkbox]");
$checkAll.click(function () {
$cks.prop('checked',true);
})
$checkNone.click(function() {
$cks.removeProp('checked',false);
})
$checkReverse.click(function () {
// 反选采用原生
$cks.each(function () {
this.checked = !this.checked;
})
})
$subCkBtn.click(function () {
var msg = "你爱好的运动是: \r\n";
var $cked = $(".demo3 input[type=checkbox]:checked"); $cked.each(function () {
msg += $(this).val()+"\r\n";
})
alert(msg);
})
}());
})
</script> <!-- 上例的变种 -->
<style>
.demo4 input[type="checkbox"] {
width:0;height:0;
width:15px;height:15px;
display: inline-block;*display: inline;*zoom:1;
vertical-align: middle;
}
.demo4 div.dv1 label {
margin-right:35px;
height:20px;line-height: 20px;
font-size:12px;
display: inline-block;*display: inline;*zoom:1;
}
.demo4 div.dv1 {
margin-top:5px;
}
.demo4 div.dv2 input {
width:60px;
cursor:pointer;
}
</style>
<form class="demo4" action="">
<legend>复选框的应用 例2</legend>
你爱好的运动是 ? <label for="checkAllOrNot"><input type="checkbox" id="checkAllOrNot" />全选/全不选</label><br/>
<div class="dv1">
<label for="item_0"><input type="checkbox" id="item_0" name="item" value="足 球" />足球</label><!--
--><label for="item_1"><input type="checkbox" id="item_1" name="item" value="篮 球" />篮球</label><!--
--><label for="item_2"><input type="checkbox" id="item_2" name="item" value="羽毛球" />羽毛球</label><!--
--><label for="item_3"><input type="checkbox" id="item_3" name="item" value="乒乓球" />乒乓球</label>
</div>
<div class="dv2">
<input type="button" value="提 交" id="sub_ckbtn2" />
</div>
</form>
<script type="text/javascript">
$(function () {
(function (){
var $ckAll = $("#checkAllOrNot");
var $cks = $(".demo4 [name=item]");
$ckAll.click(function () {
$(".demo4 [name=item]").prop('checked', this.checked);
})
$cks.click(function () {// 当复选框没有全部选中时, 取消全选.
$tmpChecked = $(".demo4 [name=item]:checked");
$ckAll.prop('checked', $cks.length == $tmpChecked.length);
})
}())
})
</script>
<style>
.content {
width:800px;margin:auto;
margin-top:15px;
}
.h3 {
background: #eee;
color:#363636;
font-weight:bold;
display: block;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
padding:8px 15px;
font-size:13px;
width:800px;
margin:auto;
margin-top:25px;margin-bottom:5px;
}
#select1 {
width:114px;height:160px;
border:1px solid #565656;
padding:5px;margin-right:105px;
}
#select2 {
width:114px;height:160px;
border:1px solid #565656;
padding:5px;
}
.fbox {
width:114px;
display: inline-block;*display: inline;*zoom:1;
}
.fbox:first-child {
margin-right:105px;
}
.fwrap { }
.u-btn {
display: inline-block;*display: inline;*zoom:1;
width:114px;
background: #464646;
color:#fff;
height:26px;line-height: 26px;
cursor:pointer;
margin-right: 5px;
text-align: center;
margin-top:3px;
}
.u-btn:hover {
background: maroon;color:#fff;
}
</style>
<div class="content">
<h3 class="h3">下拉框应用</h3>
<div>
<select multiple name="" id="select1">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
<option value="8">选项8</option>
</select><!--
--><select multiple name="" id="select2"> </select>
</div>
<div class="fwrap">
<div class="fbox">
<span class="add u-btn">选中添加到右边>></span><span class="add_all u-btn">全部添加到右边>></span>
</div><!--
--><div class="fbox">
<span class="remove u-btn"><<选中添加到左边</span><span class="remove_all u-btn"><<全部添加到左边</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
(function (){
var $slc1 = $("#select1");
var $slc2 = $("#select2"); var $add = $(".add");
var $add_all = $(".add_all");
$add.click(function () {
// 左边的添加到右边
// 获取选中的选项
var $selected = $slc1.find('option:selected');
if($selected.length<=0) {
alert('请选择要移动的选项');
}
$selected.appendTo($slc2);//删除且追加操作 appendTo
})
$add_all.click(function () {
// 将左边所有添加到右边
$slc1.find("option").appendTo($slc2);
})
var $remove = $(".remove");
var $remove_all = $(".remove_all");
$remove.click(function () {
var $selected = $slc2.find("option:selected");
if($selected.length<=0) {
alert("请选择要移动的选项");
}
$selected.appendTo($slc1);
})
$remove_all.click(function () {
var $selected = $slc2.find("option");
$selected.appendTo($slc1);
})
//双击某个选项, 添加给对方
$slc1.dblclick(function () {
// 将选中的选项添加给对方
var $options = $("option:selected");
$options.appendTo($slc2);
})
$slc2.dblclick(function () {
// 将选中的选项添加给对方
var options = $("option:selected");
options.appendTo($slc1);
})
}())
})
</script> <!-- ///////////////////////////// 表单验证 //////////////////////////// -->
<style>
.highlight {
color:red;
font-style:normal;
font-weight: normal;
}
.formtips.onError {
color:red;
}
.formtips.onSuccess {
color:green;
}
#form_validate textarea {
width:400px;
}
</style>
<form id="form_validate" class="form_validate" method="post" action="">
<legend>表单验证</legend>
<div class="int">
<label for="username"> 用户名: </label><input type="text" id="username" class="required" />
</div>
<div class="int">
<label for=""> 邮箱: </label><input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="">个人资料: </label><input type="text" id="personalinfo" />
</div>
<div class="int">
<label for="info">详细介绍: </label><textarea class="required" name="info" id="info" cols="30" rows="10"></textarea>
</div>
<div class="sub">
<input type="submit" value="提交" id="send" /><input type="reset" id="res" value="重置" />
</div>
</form>
<script type="text/javascript">
$(function () {
(function (){
var form = $("#form_validate");
// 有required类的元素是必填项
var $required = "<strong class='highlight'>*</strong> ";
form.find(".required").parent().append($required); form.find(":input").blur(function () {
var $parent = $(this).parent();
// 验证用户名
if($(this).is("#username")) {
$parent.find(".formtips").remove();
if(this.value == "" || this.value.length<6) {
var errorMsg = "请输入至少6位字符的用户名";
$parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
} else {
var okMsg = '输入正确';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
} // 验证邮箱
if($(this).is("#email")) {
$parent.find(".formtips").remove();
if(this.value == '' || (this.value!="" && !/^.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
var errorMsg = "请输入正确的邮箱地址";
$parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
} else {
var okMsg = "输入正确";
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
} return false;
}).keyup(function() {
$(this).triggerHandler('blur');
}).focus(function() {
$(this).triggerHandler('blur');
})
$("#send").click(function() {
$("form .required:input").trigger('click');
var errorCount = form.find(".onError").length;
if(errorCount>0) {
return false;
}
alert('注册成功, 密码已发到你的邮箱, 请查收');
return false;
})
}())
})
</script>
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 表单验证 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ --> <!-- 表格应用 -->
<style>
table {
border-collapse: collapse;
border-radius: 5px;
width:800px;
margin:auto;
border:1px solid #454545;
border-width:1px 0 0 1px;
}
table th, table td {
border-collapse: collapse;
border:1px solid #454545;
height:30px;line-height: 30px;
padding:0 5px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
font-size: 12px;
}
table th {
padding:5px 5px;
text-align: center;
font-size:16px;
}
.odd-color {
background: #f4f4f4;
}
.even-color {
background: beige;
}
.highlight-color {/*高亮放后才有效果*/
background: maroon;
color:#fff;
}
table {
margin-top:15px;
}
</style> <!-- 表格变色 -->
<h3 class="h3">单选框控制表格高亮</h3>
<table class="cl-tb">
<thead>
<tr><th width="25"></th><th>姓名</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td><input checked="checked" type="radio" name="list" /></td><td>圆通</td><td>浙江宁波</td></tr>
<tr><td><input type="radio" name="list" /></td><td>中通</td><td>浙江杭州</td></tr>
<tr><td><input type="radio" name="list" /></td><td>顺丰</td><td>江苏苏州</td></tr>
<tr><td><input type="radio" name="list" /></td><td>天天</td><td>北京</td></tr>
</tbody>
</table> <h3 class="h3">复选框控制表格高亮</h3>
<table class="cl-tb">
<thead>
<tr><th width="25"></th><th>姓名</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td><input checked="checked" type="checkbox" name="cklist" /></td><td>圆通</td><td>浙江宁波</td></tr>
<tr><td><input type="checkbox" name="cklist" /></td><td>中通</td><td>浙江杭州</td></tr>
<tr><td><input type="checkbox" name="cklist" /></td><td>顺丰</td><td>江苏苏州</td></tr>
<tr><td><input type="checkbox" name="cklist" /></td><td>天天</td><td>北京</td></tr>
</tbody>
</table>
<style>
table .parent {
background: #555;
color:#fff;
border:1px solid #555;
font-size:12px;
font-weight:bold;
cursor:pointer;
}
table .parent.close {
background: #f3f3f3;
color:#777;
border:1px solid #888;
border-left:none;
border-right:none;
}
table.cl-tb.m1 {
border:none;
border:1px solid #888;
border-right:none;
border-left:none;
padding:5px;
}
table.cl-tb.m1 td {
border:none;
border-left:none;
border-right:none;
font-size:12px;
}
table.cl-tb.m1 th {
border:none;
border-bottom:2px solid #000;
background: #f4f4f4;
color:maroon;
text-align: left;
}
.mgb35 {
margin-bottom: 45px;
}
table.cl-tb.m1 tbody tr.wtline td{
border-bottom: 1px solid #fff;
height:2px;
}
table.cl-tb.m1 tbody tr.highlight-color {
background: beige;
color:maroon;
}
</style>
<h3 class="h3">表格展开和关闭</h3>
<table id="cltbm1" class="cl-tb m1">
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01 highlight-color"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>小丽</td><td>女</td><td>江苏南京</td></tr> <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_02"><td>小龙</td><td>男</td><td>四川自贡</td></tr>
<tr class="child_row_02"><td>大力</td><td>男</td><td>天津</td></tr> <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
<tr class="child_row_03"><td>小汪</td><td>女</td><td>甘肃兰州</td></tr>
<tr class="child_row_03"><td>大侠</td><td>男</td><td>美国华盛顿</td></tr> </tbody>
</table> <h3 class="h3">这里添加内容筛选的行(该行高亮显示)</h3>
<table id="apttb"></table> <style>
.input-box {
width:800px;
margin:auto;
}
#ipt-filter{
height:30px;width:250px;line-height: 30px;
border:1px solid #888;
padding:0 5px;outline: none;
}
#ipt-filter:focus {
box-shadow: 0 0 4px rgba(3,3,3,0.3);
}
</style>
<h3 class="h3">根据用户输入的内容来筛选表格</h3>
<div class="input-box">
<input type="text" placeholder="请输入搜索内容" value="" id="ipt-filter" />
</div>
<table id="cltbm2" class="cl-tb m1">
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>小丽</td><td>女</td><td>江苏南京</td></tr> <tr><td>小龙</td><td>男</td><td>四川自贡</td></tr>
<tr><td>大力</td><td>男</td><td>天津</td></tr> <tr><td>小汪</td><td>女</td><td>甘肃兰州</td></tr>
<tr><td>大侠</td><td>男</td><td>美国华盛顿</td></tr> <tr><td>超人</td><td>女</td><td>火星</td></tr>
<tr><td>华少</td><td>男</td><td>金星</td></tr> <tr><td>请输入搜索内容</td><td>女</td><td>加拿大多伦多</td></tr>
<tr><td>洪七公</td><td>男</td><td>丐帮</td></tr>
</tbody>
</table> <div class="mgb35"></div>
<script type="text/javascript">
$(function () {
// 隔行变色
$(".cl-tb:lt(2)").find("tbody>tr").filter(":odd").addClass('odd-color').end().filter(':even').addClass('even-color'); // $(".cl-tb").find("tbody>tr").filter(":eq(3)").addClass('highlight-color');//高亮
// 页面初始化, 如果有单选框被选中, 或者复选框时选中的, 则对应的一行tr高亮
$("tbody>tr:has(':checked')").addClass('highlight-color'); // 单选框控制表格行高亮
$(".cl-tb").eq(0).find("tbody>tr").click(function () {
$(this).addClass("highlight-color").find("[name=list]").prop('checked',true).end().siblings("tr").removeClass("highlight-color").find("[name=list]").prop('checked',false);
}) //复选框控制表格高亮
$(".cl-tb").eq(1).find("tbody>tr").click(function () {
// !$(this).hasClass('highlight-color') ?
// $(this).addClass('highlight-color').find("[name=cklist]").prop('checked',true)
// :$(this).removeClass('highlight-color').find("[name=cklist]").prop('checked',false);
// 精简写法
var hasSelected = $(this).hasClass('highlight-color');
$(this)[!hasSelected?"addClass":"removeClass"]("highlight-color").find("[name=cklist]").prop("checked",!hasSelected);
}) // 单机父行, 相应的子行收缩
$("#cltbm1 tbody>tr.parent").each(function (i) {
$(this).click(function () {
$(this).toggleClass('close').siblings(".child_"+this.id).toggle();
}).click();
}) // 表格内容筛选
// 筛选内容中含有"小"的文本的行, 给该行加高亮
var cln_tr = $("#cltbm1 tbody>tr:contains('大')").clone(true);
$("#apttb").append(cln_tr.show().addClass('highlight-color')); // // 具有 placeholder 属性的 (*1*)
// $("[placeholder]").each(function () {
// var placeholder = $(this).attr('placeholder');
// $(this).val(placeholder).focus(function () {
// if(this.value == this.placeholder) {
// $(this).val('');
// }
// }).blur(function () {
// if(this.value == '' || this.value==placeholder) {
// $(this).val(placeholder);
// }
// });
// }); // 输入内容筛选对应表格 *****
$("#ipt-filter").keyup(function (){
$("#cltbm2 tbody>tr").hide().filter("#cltbm2 tbody>tr:contains('"+$(this).val()+"')").show();
}).keyup();// 但是表单元素的特点是刷新元素其值保持不变-----如果用jquery提前控制了搜索中focus事件除外, 如: (*1*)
})
</script> <style>
.h-msg {
width:800px;
margin:auto;
}
.h-msg p{
line-height: 1.5em;
font-size: 12px;
padding:10px 0;
}
</style>
<h3 class="h3">改变网页字体的大小</h3>
<div id="Hmsg" class="h-msg">
<div class="msg_caption">
<span class="zm_bigger">放大</span><span class="zm_smaller">缩小</span>
</div>
<div>
<p id="para">PHP原始为Personal Home Page的缩写，已经正式更名为 "PHP: Hypertext Preprocessor"。注意不是“Hypertext Preprocessor”的缩写，这种将名称放到定义中的写法被称作递归缩写。PHP于1994年由Rasmus Lerdorf创建，刚刚开始是Rasmus Lerdorf为了要维护个人网页而制作的一个简单的用Perl语言编写的程序。这些工具程序用来显示 Rasmus Lerdorf 的个人履历，以及统计网页流量。后来又用C语言重新编写，包括可以访问数据库。他将这些程序和一些表单直译器整合起来，称为 PHP/FI。PHP/FI 可以和数据库连接，产生简单的动态网页程序。<br/><br/>
在1995年以Personal Home Page Tools (PHP Tools) 开始对外发表第一个版本，Lerdorf写了一些介绍此程序的文档。并且发布了PHP1.0！在这的版本中，提供了访客留言本、访客计数器等简单的功能。以后越来越多的网站使用了PHP，并且强烈要求增加一些特性。比如循环语句和数组变量等等；在新的成员加入开发行列之后，Rasmus Lerdorf 在1995年6月8日将 PHP/FI 公开发布，希望可以透过社群来加速程序开发与寻找错误。这个发布的版本命名为 PHP 2，已经有 PHP 的一些雏型，像是类似 Perl的变量命名方式、表单处理功能、以及嵌入到 HTML 中执行的能力。程序语法上也类似 Perl，有较多的限制，不过更简单、更有弹性。PHP/FI加入了对MySQL的支持，从此建立了PHP在动态网页开发上的地位。到了1996年底，有15000个网站使用 PHP/FI。</p>
</div>
</div>
<script type="text/javascript">
$(function () {
(function () {
var $sp = $("#Hmsg .msg_caption span");
var $p = $("#para"); $sp.click(function () {
var $fontSize = parseInt($p.css("font-size"));
if($(this).attr('class') == 'zm_bigger') {
$fontSizeUnit = "+=2";
} else {
$fontSizeUnit = "-=2";
} $p.css("font-size", $fontSizeUnit);
});
}())
})
</script> <style>
.tab {width:800px;margin:auto;}
.tab .tab_menu {
height:30px;
}
.tab .tab_menu li {
border: 1px solid #dcdcdc;
float: left;
height:30px;
font-size:14px;
line-height: 30px;
margin-right:4px;
list-style:none;
padding:0 15px;
}
.tab .tab_menu li.active,.tab .tab_menu li:hover {
background: #f4f4f4;
color:maroon;
cursor:pointer;
border-color:#f4f4f4;
}
.tab .tab_box div {
width:400px;
height:150px;
font-size: 12px;
line-height: 1.5em;
border:1px solid #dcdcdc;
padding:5px;
}
.tab .tab_box div.hide {
display: none;
}
.tab .tab_box {
word-break:break-all;
letter-spacing: 1px;
word-spacing: normal;
word-wrap: break-word;
margin-top:4px;
clear:both;
}
</style>
<h3 class="h3">网页选项卡</h3>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="active">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
<script type="text/javascript">
$(function () {
(function () {
var $tab_menu = $(".tab>.tab_menu>ul>li");
$tab_menu.mouseover(function () {
$(this).addClass('active').siblings('li').removeClass('active').parents(".tab").find(".tab_box>div").eq($(this).index()).removeClass('hide').siblings("div").addClass('hide');
})
}())
})
</script> </body>
</html>
复制上面的代码, 将其存储为html文件, 然后打开, 根据实例和效果学习.
jQuery 控制表单和表格的更多相关文章
- 用jquery控制表单提交
可以监听表单submit提交事件给form一个id 吧button的type为submit $(form的id).submit(function(){ if(window.confirm('你确定要取 ...
- springmvc下js控制表单提交（表单提交前检验，提交后获取json返回值）
这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...
- JQuery中操作表单和表格
一:表单应用 1.HTML中的表单大致由三部分组成 (1).表单便签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- 制作Html标签以及表单、表格内容
制作Html一般用DW(......),Html全称为(Hyper Text Markup Language 超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...
- jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- jQuery formValidator表单验证插件
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
随机推荐
- 转：delphi异常捕获try except语句 和 try finally语句用法
转:http://www.java123.net/v/936977.html 2015-06-24 09:27:48 一直写程序都没管他们,也尽量很少用,今天终于想把他给弄个明白,在网上找来 ...
- Hibernate,一对一外键单向 记录。Timestamp 的一个坑。
首先是2张表 表A: 表B: 其中表B中的FormBaseId对应表A中的SubjectID. 数据库中没有设置外键关系. 下面是2个对应的实体 package questionnaire.model ...
- http://blog.sina.com.cn/s/blog_5bd6b4510101585x.html
http://blog.sina.com.cn/s/blog_5bd6b4510101585x.html
- jQuery操作radiobutton
1.获取某个radio选中的值,有三种方法 $("input:radio:checked").val()(*我最喜欢) ; $("input[type='radio'] ...
- set UVA 11136 Hoax or what
题目传送门 题意:训练指南P245 分析:set维护,查询删除最大最小值 #include <bits/stdc++.h> using namespace std; typedef lon ...
- ASP.NET 操作Cookie详解 增加，修改，删除
Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密).定义于RFC2109.它是网景公司的前雇员Lou Montulli在1993年3 ...
- [转]复制虚拟机后linux中的eth0变成eth1问题
为什么原来的eth0会变成eth1? 很多Linux distribution使用udev动态管理设备文件,并根据设备的信息对其进行持久化命名.udev会在系统引导的过程中识别网卡,将mac地址和网卡 ...
- Codeforces Round #249 (Div. 2) A - Queue on Bus Stop
水题 #include <iostream> #include <vector> #include <algorithm> using namespace std; ...
- AppStore上传条例
1. 条款和条件1.1 为App Store开发程序,开发者必须遵守 Program License Agreement (PLA).人机交互指南(HIG)以及开发者和苹果签订的任何协议和合同.以下规 ...
- DataTables.js插入数据的两种方式
一:采用数组的方式插入值 var tableData = []; ; ; $.each(data, function (i, d) { tableData.push([idxTable, d.stcd ...