背景图片点击添加背景颜色

登录

现在是鼠标悬停，我想实现点击当前科室之后还有背景色颜色

wangpenga · wangpenga

附上一个demo吧，现在是鼠标悬停上去会更改背景颜色，单元格属性来更改背景颜色的话应该可以，但这是背景图片，不像单元格中规中矩，有圆角，想要实现点击背景图片更改背景颜色

Joe.xu · Joe.xu

wangpenga 发表于 2021-9-3 09:11
附上一个demo吧，现在是鼠标悬停上去会更改背景颜色，单元格属性来更改背景颜色的话应该可以，但这是背景图 ...

老哥吗，这个跟我附上的demo其实原理都是一样的，用的是条件格式修改的样式，
跟按钮没有关系，看见您可能不太理解，
我就在您的demo上按那个方法实现了一下，
具体细节估计还需要你稍微调一下

宏图泰山 · 宏图泰山

本帖最后由宏图泰山于 2021-9-2 17:09 编辑

有个办法：
1、在页面上找个单元格，对单元格命名，如B2单元格：xuanzhongzhi
2、在图文列表的源表格设置id列，同时增加一个辅助列,列名：是否选中，里面公式=iferror(if((id=$B$2,1,0),0)；选中为1，未选中为0
3、在图文列表模板页面，增加一个文本框单元格，关联列名:是否选中；文本框增加命令：
条件if（文本框值=1，
设置单元格属性（设置单元格背景,选中时的颜色）
else
设置单元格属性（设置单元格背景，未选中时的颜色）
0
4、图文列表模板页插入背景图片，设个单元格关联列名：id。选择背景图片，增加命令：设置单元格属性（目标单元格xuanzhongzhi=关联列名id的单元格）。就是将本条id传值给xuanzhongzhi

wangpenga · wangpenga

这种

wangpenga · wangpenga

宏图泰山发表于 2021-9-2 17:07
有个办法：
1、在页面上找个单元格，对单元格命名，如B2单元格：xuanzhongzhi
2、在图文列表的源表格设置 ...

这是背景图片

wangpenga · wangpenga

wangpenga 发表于 2021-9-2 17:08
这种

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.cell {
display: flex;
}
.col {
padding: 1em;
transition: all ease-in-out .2s;
flex: 1;
text-align: center;
background-color: rgb(0, 103, 177);
margin: .2em;
}
.bg {
background-color: #f90;
color: #fff;
}
</style>
</head>
<body>
<div class="cell">
<div class="col">c1</div>
<div class="col">c2</div>
<div class="col">c3</div>
<div class="col">c4</div>
<div class="col">c5</div>
</div>
</body>
</html>
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log(cols)
var cols = document.querySelector('.cell').querySelectorAll('.col');
console.log(cols)
function changeBackground(target) {
for (var i = 0; i < cols.length; i++) {
cols[i].classList.remove('bg');
}
target.classList.add('bg');
}
for (var i = 0; i < cols.length; i++) {
cols[i].addEventListener('click', function(e) {
changeBackground(e.currentTarget);
function editDivBg(){
this.style.background="green";
console.log("111")
}
});
}
});
</script>

复制代码

宏图泰山 · 宏图泰山

本帖最后由宏图泰山于 2021-9-2 17:45 编辑

wangpenga 发表于 2021-9-2 17:08
这种

可以的。

Joe.xu · Joe.xu

这个感觉不需要写代码的，您可以参考上面大佬的建议，判断是否是当前行来解决，您可以看下这个案例
新手APP项目连载系列《五查询页面》
https://gcdn.grapecity.com.cn/fo ... 0&fromuid=60953
(出处: 葡萄城产品技术社区)

左边也是选什么，那一行就变色

demo给您附上

tisking · tisking

本帖最后由 tisking 于 2021-9-2 17:44 编辑

有一个很笨的方法，就是给他加个背景图片，分别对这几个背景图片进行设置颜色就能好了

你有四个按钮可以点，那就给这四个按钮套上四张图片空白颜色的，然后对这个图片进行添加命令分别设置，点到哪个，哪个设置颜色，并且把其他的按钮颜色设置成白色不就好了

wangpenga · wangpenga

本帖最后由 wangpenga 于 2021-9-2 17:54 编辑

tisking 发表于 2021-9-2 17:37
有一个很笨的方法，就是给他加个背景图片，分别对这几个背景图片进行设置颜色就能好了

现在就是背景图片，我想让他点击的时候更改背景色

		自动登录	找回密码
密码			立即注册

[已处理] 背景图片点击添加背景颜色

最佳答案

19 个回复

本帖子中包含更多资源

评分

本帖子中包含更多资源

评分

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

圣诞拼拼乐

悬赏达人

活字格认证

活字格高级认证

微信认证勋章

讲师达人