JQuery代码
1.全选反选（表单对象，属性过滤选择器） { <!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"> <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //全选 $("#chkAll").click(function () { $("input[name=hobby]").attr("checked", $(this).attr("checked")); }) //根据子复选框状态来决定全选框的状态 $("input[name=hobby]").click(singleCheck); //反选 $("#btn").click(function () { $("input[name=hobby]").each(function () { $(this).attr("checked", !$(this).attr("checked")); }) //判断全选复选框的状态 singleCheck(); }) //判断子复选框的选中状态 function singleCheck() { //假设所有的都被选中 var isCheckAll = true; $("input[name=hobby]").each(function () { //判断没有被选中则设isCheckAll 为false ,而且立即结束 if (!$(this).attr("checked")) { isCheckAll = false; return false; } }) //设置全选的checked状态 $("#chkAll").attr("checked", isCheckAll); } }) </script> </head> <body> 爱好：<br /> <input type="checkbox" id="chkAll" />全选<input type="button" id="btn" value="反选" /><br /> <input type="checkbox" name="hobby" value="cf" />吃饭<br /> <input type="checkbox" name="hobby" value="sj" />睡觉<br /> <input type="checkbox" name="hobby" value="ddd" />打豆豆<br /> </body> </html>
} 2.搜索框效果 { <!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"> <head> <title></title> <style type="text/css"> .cls { color: Gray; } </style> <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#txt").focus(function () { if ($(this).val() == "请输入搜索关键词") { $(this).val(""); $(this).removeClass("cls"); } }) $("#txt").blur(function () { if ($(this).val() == "") { $(this).val("请输入搜索关键词"); $(this).addClass("cls"); } }) }) </script> </head> <body> <input type="text" value="请输入搜索关键词" id="txt" class="cls" /> </body> </html>
} 3.权限选择 { <!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"> <head> <title></title> <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(":button:first").click(function () { $("#all option:selected").appendTo("#sel").removeAttr("selected"); }) $(":button:eq(1)").click(function () { $("#sel option:selected").appendTo("#all").removeAttr("selected"); }) $(":button:eq(2)").click(function () { $("#all option").appendTo("#sel").removeAttr("selected"); }) $(":button:eq(3)").click(function () { $("#sel option").appendTo("#all").removeAttr("selected"); }) }) </script> </head> <body> <select size="5" id="all" multiple="multiple"> <option>查找</option> <option>添加</option> <option>编辑</option> <option>删除</option> </select> <input type="button" value=">" /> <input type="button" value="<" /> <input type="button" value=">>" /> <input type="button" value="<<" /> <select size="5" id="sel" multiple="multiple"> </select> </body> </html>
} 4.动态生成网站列表 { <!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"> <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> var json = [{ "name": "百度", "link": "http://www.baidu.com" }, { "name": "谷歌", "link": "http://www.goole.com" }, { "name": "新浪", "link": "http://www.sina.com" }, { "name": "雅虎", "link": "http://www.yooho.com" } ]
$(function () { $("#btn").click(function () { //创建表格 var $table = $("<table width='400px' border='1px'></table>") $("#d1").append($table); //遍历json $.each(json, function () { //创建行 var $tr = $("<tr></tr>") $table.append($tr); //创建列 var $td = $("<td><a href='" + this.link + "' >" + this.name + "</a></td>"); $tr.append($td);
$td = $("<td>" + this.link + "</td>") $tr.append($td); }) }) }) </script> </head> <body> <input type="button" id="btn" value="生成" /> <div id="d1"> </div> </body> </html>
} 5.评分控件 { <!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"> <head> <title></title> <style type="text/css"> #u1 { list-style-type: none; } #u1 li { float: left; cursor: pointer; color: Red; margin-left: 8px; } </style> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#u1 li").mouseover(function () { // $(this).nextAll().text("☆"); // $(this).prevAll().andSelf().text("★"); $(this).prevAll().andSelf().text("★").end().end().nextAll().text("☆"); }) $("#u1 li").mouseout(function () { $(this).siblings().andSelf().text("☆") }) }) </script> </head> <body> <ul id="u1"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </body> </html>
} 6.10秒后才可以点击的按钮 { <!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"> <head> <title></title> <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script> <script type="text/javascript"> var count = 9; function setBtn() { if (count > 0) { $("#btn").val("请仔细阅读协议(" + count + ")秒"); count--; } else { $("#btn").val("同意"); btn.disabled = false; clearInterval(timeId); } } $(function () { var timeId = setInterval("setBtn()", 1000); }) </script> </head> <body> <input type="button" value="请仔细阅读协议10秒" id="btn" disabled="disabled" /> </body> </html>
} 7.无刷新评论 { <!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"> <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { var name = $("#tName").val(); var content = $("#tContent").val(); //判断是否有表格 var $tb = $("#tb"); if ($tb.length == 0) { $tb = $("<table id='tb' width='400px' border='1px'></table>"); $("#re").append($tb); } //创建行 var $tr = $("<tr></tr>"); $tb.append($tr); //创建列 var $td = $("<td>" + name + "</td>"); $tr.append($td);
$td = $("<td>" + content + "</td>"); $tr.append($td); }) }) </script> </head> <body> 评论： <div id="re"> </div> <br /> 用户名：<input type="text" id="tName" /><br /> 内容：<textarea id="tContent" rows="15" cols="30"></textarea><br /> <input id="btn" type="button" value="发表" /> </body> </html>
} 8.工资表格 { <!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"> <head> <title></title> <style type="text/css"> #t1 td { border: solid 1px red; width: 150px; height: 40px; margin-top: 8px; text-align: center; } </style> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#t1 tr:first").css("fontSize", "30px"); $("#t1 tr:last").css("color", "Red"); $("#t1 tr:not(:first):lt(2)").css("fontSize", "24px"); $("#t1 tr:not(:first):not(:last):even").css("background-color", "yellow") var sum = 0; $("#t1 tr:not(:first):not(:last)").length for (var i = 0; i < $("#t1 tr:not(:first):not(:last)").length; i++) { j = 4 * i + 3; $("#t1 tr:not(:first):not(:last) td").eq(j).each(function () { sum += parseInt($(this).text()); }) } $("#btn").click(function () { $("#sum").text(sum); }) }) </script> </head> <body> <table id="t1"> <tr> <td> 姓名 </td> <td> 性别 </td> <td> 年龄 </td> <td> 工资 </td> </tr> <tr> <td> 张三 </td> <td> 男 </td> <td> 24 </td> <td> 7986 </td> </tr> <tr> <td> 李四 </td> <td> 女 </td> <td> 19 </td> <td> 2456 </td> </tr> <tr> <td> 王五 </td> <td> 男 </td> <td> 36 </td> <td> 12000 </td> </tr> <tr> <td> 赵六 </td> <td> 女 </td> <td> 46 </td> <td> 34000 </td> </tr> <tr> <td> 董二 </td> <td> 男 </td> <td> 23 </td> <td> 1200 </td> </tr> <tr> <td> 汇总 </td> <td colspan="3" id="sum"> </td> </tr> </table> <input type="button" value="得到汇总" id="btn" /> </body> </html>
} 9.跟着鼠标走的图片 { <!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"> <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(document).mousemove(function (e) { var img = $("#img1") img.css("position", "absolute") img.css("left", e.pageX - 20 + "px") img.css("top", e.pageY - 20 + "px"); }) }) </script> </head> <body> <img src="img/tianshi.gif" id="img1" /> </body> </html>
} 10.动态生成层 { <script type="text/javascript"> $(function () { $("a").hover(function (e) { //鼠标放上去 动态生成div ，并且设置div的位置在鼠标的位置 var $div = $("<div id='tooltips'></div>"); $div.css("top", e.pageY + "px"); $div.css("left", e.pageX + "px"); $("body").append($div); }, function () { //鼠标离开 删除刚才生成的div var $div = $("#tooltips"); if ($div) { $div.remove(); } }) }) </script> } 11.qqTab { <!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" > <head> <title></title> <style type="text/css"> #qqTab ul { margin:0px; padding:0px; } #qqTab li { list-style-type:none; width:100px; text-align:center; } #qqTab h3 { background-color:Gray; margin:0px; padding:0px; width:100px; cursor:pointer; } </style> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //1 窗体加载的时候 把好友列表隐藏 $("#qqTab > h3").next().hide(); //2 点击分组 ，显示当前分组的好友 $("#qqTab > h3").click(function () { $(this).next().slideToggle(1000); }) //3 默认把我的好友展开 $("#qqTab > h3:first").next().slideDown(1000); }) </script> </head> <body> <div id="qqTab"> <h3>我的好友</h3> <ul> <li>锦涛</li> <li>邦国</li> <li>悟空</li> </ul> <h3>陌生人</h3> <ul> <li>拉登</li> <li>007</li> </ul> <h3>黑名单</h3> <ul> <li>拉登</li> <li>芙蓉</li> </ul> </div> </body> </html>
} 12.TabControl { <!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" > <head> <title></title> <style type="text/css"> #qqTab { width:500px; height:200px; border:solid 1px gray; } #qqTab ul { margin:0px; height:20px; background-color:#f1f1f1; border-bottom:solid 1px gray; } #qqTab ul li { list-style-type:none; float:left; width:80px; cursor:pointer; text-align:center; } .activeTab { background-color:red; border-bottom-width:0px; } </style> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#qqTab > ul > li").mouseover(function () { //1 li的高亮显示 $(this).addClass("activeTab").siblings().removeClass("activeTab"); //2 显示对应的div var id = $(this).attr("name"); $(id).fadeIn("fast").siblings().hide(); }); }) </script> </head> <body> <div id="qqTab"> <ul> <li name="#tabPage1" class="activeTab">国内新闻</li> <li name="#tabPage2">国际新闻</li> <li name="#tabPage3">火星新闻</li> </ul> <div id="tabs"> <div id="tabPage1" > 国内新闻111111111111 </div> <div id="tabPage2" style="display:none"> 国际新闻2222222222222 </div> <div id="tabPage3" style="display:none"> 火星新闻333333333333 </div> </div> </div> </body> </html>
} 13.伸缩导航条 { <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>伸缩的导航条</title> <style type="text/css"> body { padding: 0px; margin: 0px; background: url(bg3.jpg) no-repeat; } #wrapper { min-height: 600px; } #navigation { position: absolute; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 120px; list-style: none; } #navigation li { position: relative; float: left; margin: 0px; padding: 0px; height: 50px; width: 120px; } #navigation li a { position: absolute; display: block; top: 0px; left: 0px; height: 50px; width: 120px; line-height: 50px; text-align: center; color: #FFFFFF; } #navigation .nav0 a { background: #F50065; } #navigation .nav1 a { background: #D60059; } #navigation .nav2 a { background: #B0004A; } #navigation .nav3 a { background: #F26B00; } #navigation .nav4 a { background: #D75F00; } #navigation .nav5 a { background: #B24F00; } #navigation .nav6 a { background: #6E8F00; } #navigation .nav7 a { background: #607D00; } #navigation .nav8 a { background: #496100; } #navigation .nav9 a { background: #007f9f; } #navigation .nav10 a { background: #006b87; } #navigation .nav11 a { background: #005065; } </style> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //窗体加载，把所有a移动到窗体外面 $("#wrapper #navigation li:not(.current_page) a").css("left", "-120px"); // $("#wrapper #navigation li:not(.current_page)").hover(function () { //当前li中的a标签 //$(this).children("a") //相对定位，在当前li中找a标签 $("a", $(this)).animate({ "left": "0px" }, "fast"); }, function () { //鼠标离开 把a移出去 $("a", $(this)).animate({ "left": "-120px" }, "fast"); }); }) </script> </head> <body> <div id="wrapper"> <ul id="navigation"> <li class="nav0 current_page"><a href="#">我的日志</a></li> <li class="nav1"><a title="资源下载" href="#">资源下载</a></li> <li class="nav2"><a title="相册" href="#">相册</a></li> <li class="nav3"><a title="一起走到" href="#">一起走到</a></li> <li class="nav4"><a title="从明天起" href="#">从明天起</a></li> <li class="nav5"><a title="纸飞机" href="#">纸飞机</a></li> <li class="nav6"><a title="下一站" href="#">下一站</a></li> <li class="nav7"><a title="门" href="#">门</a></li> <li class="nav8"><a title="人文知识" href="#">人文知识</a></li> <li class="nav9"><a title="标签记录" href="#">标签记录</a></li> <li class="nav10"><a title="友情链接" href="#">友情链接</a></li> <li class="nav11"><a title="联系我们" href="#">联系我们</a></li> </ul> </div> </body> </html>
} 14.滑动照片 { <!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"> <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("img").hover(function () { $(this).animate({ "width": "300px", "height": "200px" }, "slow"); }, function () { $(this).animate({ "width": "150px", "height": "100px" }, "slow"); }) }) </script> </head> <body> <table> <tr> <td> <img src="images/01.jpg" width="150" height="100" /> </td> <td> <img src="images/02.jpg" width="150" height="100" /> </td> <td> <img src="images/03.jpg" width="150" height="100" /> </td> </tr> </table> </body> </html>
} 15.JQueryUI（滑动层和日期列表） { <!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"> <head> <title></title> <style type="text/css"> body { font-size: 12px; } #accordion { width: 400px; font-size: 12px; } </style> <link href="css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#accordion").accordion({ "header": "h3" }); $("#date").datepicker({ clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', nextText: '下月>', nextStatus: '显示下月', currentText: '今天', currentStatus: '显示本月', monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'], monthStatus: '选择月份', yearStatus: '选择年份', weekHeader: '周', weekStatus: '年内周次', dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'], dayStatus: '设置 DD 为一周起始', dateStatus: '选择 m月 d日, DD', dateFormat: 'yy-mm-dd', firstDay: 1, initStatus: '请选择日期', isRTL: false }); }) </script> </head> <body> <div id="accordion"> <div> <h3> <a href="#">First</a></h3> <div> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> </div> <div> <h3> <a href="#">Second</a></h3> <div> Phasellus mattis tincidunt nibh.</div> </div> <div> <h3> <a href="#">Third</a></h3> <div> Nam dui erat, auctor a, dignissim quis.</div> </div> </div> <input id="date" type="text" /> </body> </html>
} 16.jqueryzoom（在小图片上滑动显示对应的大图片的部位信息） { <!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"> <head> <title></title> <link href="css/jqzoom.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="Scripts/jquery.jqzoom.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(".jqzoom").jqueryzoom(); }) </script> </head> <body> <div class="jqzoom"><img src="images/mv_small.jpg" alt="mv" jqimg="images/mv_big.jpg"></div> </body> </html>
} 17.validate（表单元素的验证） { <!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"> <head> <title></title> <style type="text/css"> input { border: 1px solid black; } /*label.error, label.error { remove the next line when you have trouble in IE6 with labels in list color: red; font-style: italic; }*/ input:focus { border: 1px dotted black; } input.error { border: 1px dotted red; } label.error { background: url("images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200; } label.checked { background: url("images/checked.gif") no-repeat 0px 0px; } </style> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="Scripts/jquery.validate.js" type="text/javascript"></script> <script src="Scripts/messages_cn.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#f1").validate({ "messages": { "txtname": { "required": "请输入用户名", "minlength": "至少两个字符" }, "txtPwd": "请输入密码", "txtAge": { "number": "请输入数字", "required": "请输入年龄" } }, //验证成功之后添加 成功的样式 "success": function (label) { label.html(" ").addClass("checked"); } }); }) </script> </head> <body> <form id="f1" action="01-check.htm"> <table> <tr> <td> 用户名： </td> <td> <input name="txtname" type="text" class="required" minlength="2" /> </td> </tr> <tr> <td> 密码： </td> <td> <input name="txtPwd" type="password" class="required" /> </td> </tr> <tr> <td> 年龄： </td> <td> <input name="txtAge" type="text" class="number required" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" /> </td> </tr> </table> </form> </body> </html>
} 18.登录（cookie） { <!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"> <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="Scripts/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //判断cookie中是否有值 name var name = $.cookie("name"); if (name) { //把name赋给用户名的文本框 $("#txtName").val(name); } $("#btn").click(function () { var name = $("#txtName").val(); var pwd = $("#txtPwd").val(); if (name == "admin" && pwd == "admin") { //记录当前登陆的用户名cookie $.cookie("name", name, { expires: 7 }); //登陆成功后转向 window.location.href = "18-readCookie.htm"; } }) }) </script> </head> <body> <input type="text" id="txtName" /><br /> <input type="password" id="txtPwd" /><br /> <input id="btn" type="button" value="login" /> </body> </html>
} 19.换肤（cookie） { <!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"> <head> <title></title> <link id="lnk" href="css/red.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="Scripts/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //当页面加载的时候判断cookie是否有值 css var css = $.cookie("css"); if (css) { $("#lnk").attr("href", css); } $("a").click(function () { var href = $(this).attr("href"); //设置link标签的href属性 $("#lnk").attr("href", href); //把当前选中的样式，记录到cookie $.cookie("css", href, { expires: 7 }); //取消后续内容的执行 return false; }) }) </script> </head> <body> <a href="css/red.css">红</a> <a href="css/yellow.css">黄</a> <a href="css/blue.css">蓝</a> </body> </html>
}
