点击div，获取div元素中的值或文本（转）

最新推荐文章于 2023-05-11 17:40:11 发布

敦厚的曹操

最新推荐文章于 2023-05-11 17:40:11 发布

阅读量3.3k

点赞数 1

分类专栏： 4.【html】 5.【css】文章标签： css html js

原文链接：http://www.ulsdfdfdfdfdfdfwd.com

版权

5.【css】同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

4.【html】

83 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>点击按钮div变色.html</title>
<meta charset="utf-8" />
</head>
<style>

.group { display: block; width: 100%; text-decoration: none; font-size: 0.9vw; line-height: 1.6vw; font-family: sans-serif; }
.group h2 { display: block; margin: 0; padding: 0; }
.group h2 a { display: inline-block; font-size: 1.2vw; padding: 0.5vw 1vw; color: #666; background: #eee; border: #ccc solid; border-width: 1px 1px 0 1px;font-weight: normal; }
.group .joined_list { display: block; width: calc(100% - 2px); margin: 0; padding: 0; border: #ccc solid 1px; min-height: 5vw; overflow: hidden; }
.group .joined_list li { display: block; float: left; padding: 0.5vw; margin: 1vw; border: #333 solid 1px; border-radius: 0.25vw; font-size: 0.9vw; line-height: 1.5vw; list-style: none; }
.group .joined_list li a.del { display: inline-block; position: relative; color: transparent; cursor: pointer; margin: 0 0.5vw; }
.group .joined_list li a.del::after { content: "\2716"; position: absolute; width: 0.9vw; height: 0.9vw; font-size: 0.7vw; line-height: 0.9vw; text-align: center; border-radius: 50%; top: 0.325vw; left: 0; cursor: pointer; background: #333; color: #fff; }

.group .join_list { display: block; width: calc(100% - 2px - 2vw); margin: 2vw 0; padding: 1vw; border: #ccc solid 1px; }
.group .join_list h3 { display: block; font-size: 1vw; margin: 0; padding: 0; }
.group .join_list h3 b { color: #00A9C2; }
.group .join_list h3 b::before { content: "\272A"; margin: 0 0.5vw 0 0; }
.group .join_list h3 span.page_list { float: right; }
.group .join_list h3 span.page_list a { font-size: 0.8vw; margin: 0 0.1vw; text-decoration: none; color: #666; cursor: pointer; }
.group .join_list h3 span.page_list a.active { color: #00A9C2; cursor: default; }

.group .join_list dt,
.group .join_list dd { display: block; clear: both; overflow: hidden; margin: 0; padding: 0;}
.group .join_list dt { margin: 1vw 0; height: 3.25vw; }
.group .join_list dd { margin: 1px 0;border-bottom: 1px dashed #ccc;}
.group .join_list dt span,
.group .join_list dd span { display: block; float: left; margin: 0 1px; padding: 0.5vw; text-align: center; }
.group .join_list dt span { padding: 1vw 0.5vw;}
.group .join_list dt span:nth-child(1),
.group .join_list dd span:nth-child(1) { width: calc(5% - (2px + 1vw)); }
.group .join_list dt span:nth-child(2),
.group .join_list dd span:nth-child(2) { width: calc(10% - (2px + 1vw)); }
.group .join_list dt span:nth-child(3),
.group .join_list dd span:nth-child(3) { width: calc(10% - (2px + 1vw)); }
.group .join_list dt span:nth-child(4),
.group .join_list dd span:nth-child(4) { width: calc(10% - (2px + 1vw)); }
.group .join_list dt span:nth-child(5),
.group .join_list dd span:nth-child(5) { width: calc(10% - (2px + 1vw)); }
.group .join_list dt span:nth-child(6),
.group .join_list dd span:nth-child(6) { width: calc(20% - (2px + 1vw)); }
.group .join_list dt span:nth-child(7),
.group .join_list dd span:nth-child(7) { width: calc(15% - (2px + 1vw)); }
.group .join_list dt span:nth-child(8),
.group .join_list dd span:nth-child(8) { width: calc(20% - (2px + 1vw)); }

.group .join_list dt span select { position: relative; font-size: 0.8vw; }

.group .join_list dd span.join { color: rgb(200,0,0);}
.group .join_list dd span.control a { display: inline-block; color: #00B0CF; padding: 0 5px; margin: 0 5px; cursor: pointer; }

</style>

<body>
<div class="group">
<h2><a>已选团队成员</a></h2>
<ul class="joined_list"></ul>
<dl class="join_list">
<h3><b>可选人列表</b>
<span class="page_list">
<a href="#"><<</a>
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">>></a>
</span>
</h3>
<dt>
<span>序号</span>
<span>账号</span>
<span>所属部门</span>
<span>角色名称</span>
<span>手机号码</span>
<span>邮箱地址</span>
<span>
<select>
<option>加入状态</option>
<option>已加入</option>
<option>未加入</option>
</select>
</span>
<span>操作</span>
</dt>
<dd>
<span class="id">1</span>
<span class="name">韦雪云</span>
<span class="position">项目运营部</span>
<span class="title">部门经理</span>
<span class="mobile">15148103341</span>
<span class="email">asdg@chinabidders.com</span>
<span class="join">未加入</span>
<span class="control"><a class="view" οnclick="uiwopen()">查看</a><a class="add" οnclick="addme(this)">添加</a></span>
</dd>
<dd>
<span class="id">2</span>
<span class="name">张娟</span>
<span class="position">项目运营部</span>
<span class="title">项目副经理</span>
<span class="mobile">15148103341</span>
<span class="email">asdg@chinabidders.com</span>
<span class="join">未加入</span>
<span class="control"><a class="view" οnclick="uiwopen()">查看</a><a class="add" οnclick="addme(this)">添加</a></span>
</dd>
</dl>
</div>
</body>
<script src="js/jquery.js"></script>
<script>
//添加成员
function addme(me) {
var name = $(me).parent("span").siblings("span.name").html();
var title = $(me).parent("span").siblings("span.title").html();
var button = confirm("您确定将" + name + "加入到项目团队吗？");
if (button == true){
$(me).parent("span").siblings("span.join").html("已加入").css("color","rgb(0,200,0)");
$("ul.joined_list").append('<li>' + title + ': <b>' + name + '</b>' + '<a class="del" οnclick="delme(this)">X</a></li>');
$(me).css("display","none");
}
};
//删除成员
function delme(me) {
var name = $(me).siblings("b").html();
var button = confirm("您确定将" + name + "移出项目团队吗？");
if (button == true){
$(me).parent("li").remove();
$("dl.join_list dd").each(function () {
if ($(this).children("span.name").html() == name) {
$(this).children("span.join").html("未加入").css("color","rgb(200,0,0)");
$(this).children("span.control").children("a.add").css("display","inline-block");
}
});
}
};
</script>
</html>