鹤 翔 2024-03-28 10:35 采纳率: 92.3%
浏览 9
已结题

Html如何实现符合条件的高亮显示，不符合的低亮显示

img


如图中，S，N，T，F四个字母为条件，点击任何一个字母，在下方数据ST，SN，FN，NF四个中符合条件的高亮显示，不符合的低亮显示

  • 写回答

2条回答 默认 最新

  • Kwan的解忧杂货铺@新空间代码工作室 2024-03-28 10:36
    关注

    鹤 翔 上午好☀️☀️☀️️
    本答案参考ChatGPT-3.5

    要实现这样的效果，可以使用JavaScript来处理。下面是一种实现方式。

    1. 首先，给每个字母添加一个点击事件，点击时触发一个函数。
    2. 在函数中，获取当前点击的字母。
    3. 使用DOM操作，获取下方数据ST，SN，FN，NF四个元素，以便后续处理。
    4. 遍历这四个数据元素，判断其内容是否包含当前点击的字母。
    5. 如果包含当前字母，则将其样式设置为高亮显示；如果不包含，则将其样式设置为低亮显示。

    以下是示例代码：

    <!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      color: red; /* 高亮显示的样式 */
    }
    .lowlight {
      color: gray; /* 低亮显示的样式 */
    }
  </style>
</head>
<body>
  <div>
    <p onclick="highlight('S')">S</p>
    <p onclick="highlight('N')">N</p>
    <p onclick="highlight('T')">T</p>
    <p onclick="highlight('F')">F</p>
  </div>
  <div>
    <p id="data1">ST</p>
    <p id="data2">SN</p>
    <p id="data3">FN</p>
    <p id="data4">NF</p>
  </div>

  <script>
    function highlight(letter) {
      var dataElements = document.querySelectorAll('div > p[id^="data"]');
      for (var i = 0; i < dataElements.length; i++) {
        var content = dataElements[i].textContent;
        if (content.includes(letter)) {
          dataElements[i].classList.add('highlight');
          dataElements[i].classList.remove('lowlight');
        } else {
          dataElements[i].classList.add('lowlight');
          dataElements[i].classList.remove('highlight');
        }
      }
    }
  </script>
</body>
</html>

    注意，上述示例代码仅是一种实现方式，具体还可以根据实际需求进行调整。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 4月5日
  • 已采纳回答 3月28日
  • 创建了问题 3月28日

悬赏问题

  • ¥15 python怎么在已有视频文件后添加新帧
  • ¥20 虚幻UE引擎如何让多个同一个蓝图的NPC执行一样的动画,
  • ¥15 fluent里模拟降膜反应的UDF编写
  • ¥15 MYSQL 多表拼接link
  • ¥15 关于某款2.13寸墨水屏的问题
  • ¥15 obsidian的中文层级自动编号
  • ¥15 同一个网口一个电脑连接有网，另一个电脑连接没网
  • ¥15 神经网络模型一直不能上GPU
  • ¥15 pyqt怎么把滑块和输入框相互绑定，求解决！
  • ¥20 wpf datagrid单元闪烁效果失灵