如何用CSS实现td被点击时和点击后换背景，点击另一个的时候，它在换回来。。是用CSS。。。

Posted 2023-04-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用CSS实现td被点击时和点击后换背景，点击另一个的时候，它在换回来。。是用CSS。。。相关的知识，希望对你有一定的参考价值。

光CSS可能实现不了这个问题，若是能实现请说明。我现在说下CSS结合JS实现。
首先我不知道你有在一个页面里有多少个TD，所以我写个通用的方法。希望能给你帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1888/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.td_bg
background:#CCC;

.td_down
background:#f00;

</style>
<script>
function mousedown(nameId,numId,total)
for(i=0;i<=total;i++)
document.getElementById(nameId+i).className = 'td_bg';
//alert(nameId+i)

document.getElementById(nameId+numId).className = 'td_down';
//alert(nameId+numId)

</script>
</head>

<body>
<div id="showdiv" style="background:#CCC;"></div>
<table width="200" border="0" cellspacing="1" cellpadding="0">
<tr>
<td id="td0" onclick="mousedown('td',0,8)" class="td_bg"> </td>
<td id="td1" onclick="mousedown('td',1,8)" class="td_bg"> </td>
<td id="td2" onclick="mousedown('td',2,8)" class="td_bg"> </td>
</tr>
<tr>
<td id="td3" onclick="mousedown('td',3,8)" class="td_bg"> </td>
<td id="td4" onclick="mousedown('td',4,8)" class="td_bg"> </td>
<td id="td5" onclick="mousedown('td',5,8)" class="td_bg"> </td>
</tr>
<tr>
<td id="td6" onclick="mousedown('td',6,8)" class="td_bg"> </td>
<td id="td7" onclick="mousedown('td',7,8)" class="td_bg"> </td>
<td id="td8" onclick="mousedown('td',8,8)" class="td_bg"> </td>
</tr>
</table>
</body>
</html> 参考技术A 这个如果纯css能实现的话，那js可咋混啊。。。参考技术B 这个简单啦，先用写个样式设置TD的背景色，再写个伪类样式设置TD被点击时的样式，最后再一个样式把背景给换回来

商务系统的构造思路（无源码！）+如何用jsp实现点击单选框内容显示在另一个jsp页面

敲码经验总结：

之前犯了一个错误就是，没有从底层开始学起，有啥问题，就直接博客园找源码，去CSDN找源代码，看到代码就复制粘贴，结果从新梳理知识点的时候，貌似除了复制粘贴，印象深刻的知识啥也没学到。

看来代码这些东西还是得多敲多总结才有效，不要害怕从底层开始学起，因为没有底层的知识作为支撑，即使你能做出效果也不知道如何做出来，万不可知其然而不知其所以然。

好了，敲码经验总结结束了，现在到了知识点回顾：

总纲分成两个部分：

一、总体商务平台的构思

二、实现JSP点击单选按钮，内容显示到JSP里

细节：

总体商务平台的构架需要一个框架，比如说MVC，M指的是Model模型，V指的是Vison视图，C指的是Cotrol

三个层次各司其职，他们的结构呈现上中下，

最顶层是Vison。主要功能是显示用户输入的数据和呈现用户需要的数据

中间层是Model。主要功能是传递作用，当用户输入数据后，它便接受数据传递给Model，让他寻找相应的数据处理方式

最底层是Model。主要功能是处理用户的数据，其中有个模型称为数据模型，它和数据库有着千丝万缕的联系

三者之间你可以近似看成是顾客，中间商，供应商的关系，顾客有需求，中间商接受顾客需求告知供应商，供应商寻找用户需要的产品给中间商，中间商再呈现给顾客，满足顾客的需要。

重点：MVC只是个复杂的系统，并不是拿手就可用的框架

但MVC系统有多个小弟，其中有个小弟特别突出，他就是SSH，SSH是能力极强的框架，我要介绍的商务系统就是建立在它的基础上

SSH，S指的是Struts，S指的是Spring，H指的是Hibernate

他们继承了老大的思维模式，三个层次也是各司其职，他们的结构也是呈现上中下

最顶层是Struts。主要功能是提交数据，通过Action处理，从forward到对应的网页。采用的技术是Servlet、JSP

中间层是Spring。主要的功能是提供管理业务对象的调用接口。【Spring也称为Service、Manager】

底层是Hibernate。主要的功能是与数据库打交道

因此

在我的商务系统的SSH的构造是【从后到前顺序】：

实体层（数据库的数据）

Dao层（服务方法的接口）

服务层（调用Dao层实现各种服务方法的编写）

Web层（编写Action和form【主要是对数据进行必要的验证和转换】、JSP页面对业务数据的操作）

对应SSH的框架就是

Hibernate：负责实体层

Spring：负责Dao层和服务层

Struts：负责Web层

按照这样思路：

对象的调用流程就是：JSP页面-->通过Acrion等方法-->反映到Service-->寻找相应的DAO接口-->到Hibernate寻找

数据的流向：ActionFormBean接受用户数据-->Action将数据从中提取出来-->封装成VO或PO-->调用业务层的Bean类，接受这个PO对象，调用DAO接口方法-->到实体层进行持久化操作

这就是我的商务平台的构建思路，当然这只是万里长征的第一步，源码什么的还没摆出来，不过我会争取持久更新的（毕竟有时候搞一个方法就花去我一天或者以上），但是路漫漫其修远兮，吾将上下而求索！

二、实现JSP点击单选按钮，内容显示到JSP上

效果图先摆上：

【选择前：】

技术图片

【选择后：】

技术图片

有两个JSP源码，

以下是单选前的源码（select.jsp）：

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <html>
 3 <head>
 4     <title>选择</title>
 5 </head>
 6 <body>
 7 
 8 选择自己的城市信息
 9 <form action="selec_result.jsp" method="post"><!--开始跳转新的jsp-->
10     选择你所在的城市<select name="home"><!--相当于引用变量-->
11     <option value="beijing">北京</option><!--value后面是显示的值，再后面的是界面选择项-->
12     <option value="shanghai">上海</option>
13     <option value="guangzhou">广州</option>
14 </select>
15     <input type="submit" value="提交"><!--type是提交操作，value是按钮名字-->
16 </form>
17 </body>
18 </html>

以下是单选后的源码（selec_result.jsp）：

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <%@ page import="java.io.PrintWriter" %>
 3 <html>
 4 <body>
 5 <%
 6     String home=request.getParameter("home");
 7     PrintWriter out1=response.getWriter();
 8     out1.print("你所在的城市是："+home);
 9 %>
10 </body>
11 </html>

源码已经有了，我就讲讲在其中要注意什么，有两点：

一、要导入servlet-api.jar包，只有导入才能响应respone的操作，【在下载的Tomcat的lib文件里可以找到，要是懒得找，笔者这里有链接：https://pan.baidu.com/s/16C1GF9cPvo08MC3rxPGmSw；提取码：q4tq；笔者使用的是Tomcat 8.5】

二、每次修改其中jsp源码，需要将端口重新启动才能显示最新修改的信息【这是缺点，目前笔者没有找到解决方案】

今天的分享到这里结束了，希望对你有帮助。

以上是关于如何用CSS实现td被点击时和点击后换背景，点击另一个的时候，它在换回来。。是用CSS。。。的主要内容，如果未能解决你的问题，请参考以下文章

如何用css去掉a标签点击时的背景色？

如何用js或者css实现，鼠标经过的时候背景色变化，停留在这页时，背景色还是变化后的颜色

如何用jQuery实现点击按钮弹出一个盒子，除了这个盒子以外的其他部分颜色全变暗？

如何用Python实现网页按钮的自动点击

如何用html实现点击一个链接，弹出一个下载的对话框，即有保存，运行，打开啥的

如何用js实现一组图片，使用了z-index三层排布，然后点击一张图片，被点击张图片至于顶层，其他依次？

如何用CSS实现td被点击时和点击后换背景，点击另一个的时候，它在换回来。。 是用CSS。。。

商务系统的构造思路（无源码！）+如何用jsp实现点击单选框内容显示在另一个jsp页面

如何用CSS实现td被点击时和点击后换背景，点击另一个的时候，它在换回来。。是用CSS。。。