简单的选择器

来源:互联网 发布:java api1.7文档下载 编辑:程序博客网 时间:2024/05/16 16:19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus" charset="utf-8"/>  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style type="text/css">.select{background-color:#f00;}  </style> </head> <script type="text/javascript"  src="js/jquery-1.7.min.js"></script> <script type="text/javascript">function test(a,b,c,d){a.click(function(){if($("#div"+b+" .select").length==0){alert("请选择语言!");}else if($("#div"+b+" .select").length>1&&d==1){alert("不能同时对多种语言进行操作");}else{c.append($("#div"+b+" .select"));$("#div"+b+" .select").remove();}})}$(document).ready(function(){$("#div1 p").toggle(  function(){  $(this).addClass("select");},  function(){  $(this).removeClass("select");  });test($("#b1"),1,$("#div3"),0);test($("#b2"),1,$("#div3"),1);test($("#b3"),3,$("#div1"),1);test($("#b4"),3,$("#div1"),0);}) </script> <body>  <div id="div0" style="width:400px;heigth:200px;"><div id="div1" style="border:1px solid #000000;width:150px;height:250px;float:left;"> <p id="p1">俄语</p> <p id="p2">日语</p> <p id="p3">英语</p> <p id="p4">德语</p> <p id="p5">法语</p> <p id="p6">其他外语</p></div><div id="div2" style="width:40px;float:left;"><p><input type="button" value=">>" id="b1" style="width:40px;"></p><p><input type="button" value=">" id="b2" style="width:40px;"></p><p><input type="button" value="<" id="b3"  style="width:40px;"></p><p><input type="button" value="<<" id="b4" style="width:40px;"></p></div><divid="div3" style="border:1px solid #000000;width:150px;height:250px;float:left;"></div></div> </body></html>


 

原创粉丝点击