学习“javaScript+CSS+DIV实现下拉菜单，实现表格变色”内容的笔记

最新推荐文章于 2020-05-24 10:42:42 发布
原创 最新推荐文章于 2020-05-24 10:42:42 发布 · 386 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用HTML和JavaScript实现下拉菜单功能及表格行的鼠标悬停变色效果。通过代码示例，展示了如何创建响应鼠标操作的交互式元素，适用于网页前端开发。

实现下拉菜单

<!DOCTYPE html>
<html>
  <head>
    <title>下拉菜单示例</title>
    <script language="javaScript">
    //当鼠标移动到菜单选项的时候显示对应的DIV
    function show(menu){
        document.getElementById(menu).style.visibility="visible";}
    //当鼠标移出的时候隐藏所有的DIV
    function hide(){
        document.getElementById("menu1").style.visibility="hidden";
        document.getElementById("menu2").style.visibility="hidden";
        document.getElementById("menu3").style.visibility="hidden";
    }
    </script>
  </head>
  
  <body>
   <table>
     <tr bgcolor="#9999FF" align="center">
     <td width="120" onMouseMove="show('menu1')" onMouseOut="hide()">系列课程</td>
     <td width="120" onMouseMove="show('menu2')" onMouseOut="hide()">教学课件</td>
     <td width="120" onMouseMove="show('menu3')" onMouseOut="hide()">课程大纲</td>
     </tr>
     </table>
     <div id="menu1" onMouseMove="show('menu1')" onMouseOut="hide()"
          style="background:#9999FF;position:absolute;left:12px;top:38px;width:120px;
          visibility=hidden">
          <span>c++程序设计</span><br>
          <span>java程序设计</span><br>
          <span>c#程序设计</span><br>
     </div>
     <div id="menu2" onMouseMove="show('menu2')" onMouseOut="hide()"
          style="background:#9999FF;position:absolute;left:137px;top:38px;width:120px;
          visibility=hidden">
          <span>c++课件</span><br>
          <span>java课件</span><br>
          <span>c#课件</span><br>
     </div>
     <div id="menu3" onMouseMove="show('menu3')" onMouseOut="hide()"
          style="background:#9999FF;position:absolute;left:260px;top:38px;width:120px;<!--注意是：，以及px-->
          visibility=hidden">
          <span>c++教学大纲</span><br>
          <span>java教学大纲</span><br>
          <span>c#教学大纲</span><br>
     </div>
  </body>
</html>

实现表格变色

<!DOCTYPE html>
<html>
  <head>
    <title>变色表格示例</title>
    <script language="javaScript">
      function changeColor(row){
         document.getElementById(row).style.backgroundColor='#CCCCFF';
      }
      function resetColor(row){
         document.getElementById(row).style.backgroundColor='';
      }
    </script>
  </head>
  
  <body>
    <table width="200" border="5" cellpadding="1" align="center"><!-- cellpadding规定单元边沿与其内容之间的空白，实际上就是格子里面空白部分的多少 -->
     <tr><th>学校</th><th>专业</th><th>人数</th></tr>
     <tr align="center" id="row1"
           onMouseOver="changeColor('row1')" onMouseOut="resetColor('row1')">
           <th>北大</th><th>法律</th><th>2000</th>
     </tr>
     <tr align="center" id="row2"
           onMouseOver="changeColor('row2')" onMouseOut="resetColor('row2')">
           <th>清华</th><th>计算机</th><th>5000</th>
     </tr>
     <tr align="center" id="row3"
           onMouseOver="changeColor('row3')" onMouseOut="resetColor('row3')">
           <th>人大</th><th>经济</th><th>6000</th>
     </tr>
    </table>
  </body>
</html>

web课程设计——仿小米商城(10个页面)HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作代码
qq__3200628753的博客
08-15 1033
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
搜索框案例，表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单
KXJ
04-26 552
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
JavaScript+CSS+DIV实现表格变色
i_belive_my_love的博客
09-21 653
设置一个表格，当鼠标移动到某行时，颜色改变，鼠标离开时，颜色变为原来的样子。每一行都要两个鼠标事件： 1.鼠标覆盖：onMouseOver 2.鼠标离开：onMouseOut   同时这两个事件需要调用事件函数： 1.实现对行的颜色设置： resetColor(row) 2.实现对行颜色的改变： changeColor(row) 实现代码： 变色表格示例
js实现div层或表格缓缓下拉效果
11-07
不错的效果，实现div层或表格内容缓缓展开
js控制select选中显示不同表单内容select下拉菜单特效
11-11
js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效
JavaScript+CSS+DIV实现下拉菜单
i_belive_my_love的博客
09-20 1174
1.层标签 : (division)是块级元素，可以包含段落，标题，表格，乃至诸如章节，摘要和备注等。由于是块级元素，在段落开始，结束出会插入一个换行。 基本语法： 语法说明： 1.position 属性主要是定义层的定义方式。 2.left和top 是用来定义层的位置，表示与其他对象的左部，顶部的相对位置。 3.width和height 用来定义层的宽度和高度 4.float
js用下拉菜单控制表格显示与否
翔的窝窝
04-24 1019
js代码： script type="text/javascript">function hide(tb,sl)...{if(document.getElementById(sl).value == "是")document.getElementById(tb).style.display = "block";elsedocument.getElementById(tb).style.
HTML、CSS与JavaScript学习笔记及源码示例
结合标签中的“源码”、“代码示例”、“学习笔记”等关键词，可以推断该压缩包内 likely 包含多个独立的小型项目或练习案例，覆盖常见应用场景，如轮播图、模态框、下拉菜单、表单验证、选项卡切换、计数器、倒计时...
HTML&CSS笔记
我佛很悲
11-20 1191
HTML&CSS笔记 此笔记为李立超老师网课内容
108款超酷CSS导航菜单，打造强大公司网站
- 当使用JavaScript和jQuery来实现菜单时，可以制作出交互性更强、用户体验更丰富的网页导航。 5. 响应式网页设计： - “子菜单由列表组成的二级横向导航菜单.rar”和“两款漂亮的css二级横向导航菜单附psd源文件...
js 实现 从一个下拉列表往另一个下拉列表添加内容
03-31
js 实现 从一个下拉列表往另一个下拉列表添加内容! 值得下载看看!资源免费,大家分享!!
随着下拉框的改变 下拉框的值也在同步变化
04-27
js实现通过改变下拉框的值，输出相应的下拉框的value
JS+CSS实现DIV层的展开、收缩效果
10-22
主要介绍了JS+CSS实现DIV层的展开、收缩效果，以两个完整实例介绍了JS控制DIV层的展开、收缩效果，感兴趣的小伙伴们可以参考一下
jQuery网页上下滚动背景变色特效
06-10
jQuery网页上下滚动背景变色特效，页面滚动改变背景颜色，背景颜色修改对应的data-background值即可。
CSS+JS实现点击菜单文字背景变色效果
12-16
CSS+JS实现点击菜单文字背景变色效果
css设置下拉菜单
山楂的博客
12-22 457
代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;下拉菜单实例&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; .dropbtn { background-color:#CCC; color: #000; pa
用JS让下拉框改变网页背景颜色
weixin_30496431的博客
07-25 1337
<HTML> <HEAD> <TITLE>石家庄渣浆泵配件</TITLE> </HEAD> <SCRIPT> <!-- function bgChange(selObj) { newColor = selObj.options[selObj.selectedIndex].text; ...
利用JavaScript实现动态显示表格且对应改变按键的value值
weixin_30421809的博客
09-01 245
插入的代码并没有符合HTML5样式，只是为了实现利用JS动态显示表格，并且按键的value值会同时发生变化的功能。 1 <!DOCTYPE > 2 <html > 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt...
1个盒子变色点破JavaScript的2种需要事件委托场景
执念斩长河
05-24 494
这个例子采用增加列表项，点击列表项实现变色，其实先把li添加到ul里，然后根据事件委托实现变色。巧妙地对应了两种事件委托使用场景一个是大量相似元素。其次是动态元素需要添加监听。值得一敲！
纯DIV+CSS实现的图片轮播效果
轮播图的实现方式多种多样，其中纯DIV+CSS方法是较为基础且常见的实现技术。本篇将详细介绍如何使用纯DIV+CSS技术来制作一个简单的图片轮播切换效果。 首先，我们将轮播图理解为一个容器，里面包含了多个图片展示...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值