首页 > Web开发 > 详细

简单的(jquery)DIV点选框

时间:2015-06-05 12:08:43      阅读:251      评论:0      收藏:0      [点我收藏+]

技术分享

关于点选框的简单示例:

      这个点选框的示例不是input多选框,而是一个div里面嵌套一个子div元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jump</title>
<script src="js/jquery-2.1.4.js"></script>
<style>
.select{float:left;margin:40px 40px;}
.boss{width:10px;height:10px;border:2px solid #666;}
.boss div{width:8px;height:8px;background: #666;margin: 1px;}
</style>
<script>
$(function(){
var $boss=$(‘.boss‘);
$boss.click(function(){
$(".boss").css("border","2px solid #666")
.children().css("background","#666");
$(this).css("border","2px solid red")
.children().css("background","red");
})
})
</script>
</head>
<body>
<div id="head">
<div class="select">
<div class="boss"><div></div></div>
</div>
<div class="select">
<div class="boss"><div></div></div>
</div>
<div class="select">
<div class="boss"><div></div></div>
</div>
</div>
</body>
</html>


技术分享

选框的形状多种多样,可按自己的要求修改具体的样式。

 

简单的(jquery)DIV点选框

原文:http://www.cnblogs.com/treeclass/p/4553918.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!