请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

wangpenga 悬赏达人认证

银牌会员

67

主题

955

帖子

2618

积分

银牌会员

积分
2618

圣诞拼拼乐悬赏达人活字格认证

wangpenga 悬赏达人认证
银牌会员   /  发表于:2021-9-2 16:44  /   查看:3077  /  回复:19
1金币

现在是鼠标悬停,我想实现点击当前科室之后还有背景色颜色
附件: 您需要 登录 才可以下载或查看,没有帐号?立即注册

最佳答案

查看完整内容

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

19 个回复

倒序浏览
wangpenga悬赏达人认证
银牌会员   /  发表于:2021-9-3 09:11:28
来自 17#
附上一个demo吧,现在是鼠标悬停上去会更改背景颜色,单元格属性来更改背景颜色的话应该可以,但这是背景图片,不像单元格中规中矩,有圆角,想要实现点击背景图片更改背景颜色

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

评分

参与人数 1金币 +5 收起 理由
Joe.xu + 5 很给力!

查看全部评分

回复 使用道具 举报
最佳答案
最佳答案
Joe.xu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2021-9-2 16:44:49
来自 20#
wangpenga 发表于 2021-9-3 09:11
附上一个demo吧,现在是鼠标悬停上去会更改背景颜色,单元格属性来更改背景颜色的话应该可以,但这是背景图 ...

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


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
宏图泰山
初级会员   /  发表于:2021-9-2 17:07:20
2#
本帖最后由 宏图泰山 于 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

评分

参与人数 1金币 +5 收起 理由
Joe.xu + 5 很给力!

查看全部评分

回复 使用道具 举报
wangpenga悬赏达人认证
银牌会员   /  发表于:2021-9-2 17:08:25
3#

这种

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
wangpenga悬赏达人认证
银牌会员   /  发表于:2021-9-2 17:11:06
4#
宏图泰山 发表于 2021-9-2 17:07
有个办法:
1、在页面上找个单元格,对单元格命名,如B2单元格:xuanzhongzhi
2、在图文列表的源表格设置 ...


这是背景图片

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
wangpenga悬赏达人认证
银牌会员   /  发表于:2021-9-2 17:12:46
5#

代码
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <style>
  7.                         .cell {
  8.                                 display: flex;
  9.                         }

  10.                         .col {
  11.                                 padding: 1em;
  12.                                 transition: all ease-in-out .2s;
  13.                                 flex: 1;
  14.                                 text-align: center;
  15.                                 background-color: rgb(0, 103, 177);
  16.                                 margin: .2em;
  17.                         }

  18.                         .bg {
  19.                                 background-color: #f90;
  20.                                 color: #fff;
  21.                         }
  22.                 </style>
  23.         </head>
  24.         <body>
  25.                 <div class="cell">
  26.                         <div class="col">c1</div>
  27.                         <div class="col">c2</div>
  28.                         <div class="col">c3</div>
  29.                         <div class="col">c4</div>
  30.                         <div class="col">c5</div>
  31.                 </div>
  32.                
  33.         </body>
  34. </html>
  35. <script>
  36.         document.addEventListener('DOMContentLoaded', function() {
  37.                 console.log(cols)
  38.                 var cols = document.querySelector('.cell').querySelectorAll('.col');
  39. console.log(cols)

  40.                 function changeBackground(target) {
  41.                         for (var i = 0; i < cols.length; i++) {
  42.                                 cols[i].classList.remove('bg');
  43.                         }
  44.                         target.classList.add('bg');
  45.                 }
  46.                 for (var i = 0; i < cols.length; i++) {
  47.                         cols[i].addEventListener('click', function(e) {
  48.                                 changeBackground(e.currentTarget);
  49.                                 function editDivBg(){
  50.                                         this.style.background="green";
  51.                                         console.log("111")
  52.                                 }
  53.                                
  54.                         });
  55.                 }
  56.         });
  57.         </script>
复制代码


回复 使用道具 举报
宏图泰山
初级会员   /  发表于:2021-9-2 17:30:34
6#
本帖最后由 宏图泰山 于 2021-9-2 17:45 编辑

可以的。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
Joe.xu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2021-9-2 17:31:19
7#
这个感觉不需要写代码的,您可以参考上面大佬的建议,判断是否是当前行来解决,您可以看下这个案例
新手APP项目连载系列《五  查询页面》
https://gcdn.grapecity.com.cn/fo ... 0&fromuid=60953
(出处: 葡萄城产品技术社区)

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



demo给您附上


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
tisking悬赏达人认证 活字格认证
论坛元老   /  发表于:2021-9-2 17:37:35
8#
本帖最后由 tisking 于 2021-9-2 17:44 编辑

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


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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
wangpenga悬赏达人认证
银牌会员   /  发表于:2021-9-2 17:42:38
9#
本帖最后由 wangpenga 于 2021-9-2 17:54 编辑
tisking 发表于 2021-9-2 17:37
有一个很笨的方法,就是给他加个背景图片,分别对这几个背景图片进行设置颜色就能好了

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部