码迷,mamicode.com
首页 > Web开发 > 详细

简单的(jquery)DIV点选框

时间:2015-06-05 12:11:31      阅读:134      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!