微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 UI设计 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > html链接元素a、css定位与下拉菜单
博主信息
博文 100
粉丝 8
评论 2
访问量 174901
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html链接元素a、css定位与下拉菜单
lilove的博客
原创
1513人浏览过

认识<a>…</a>

a标签常见写法

<a href="...">...</a>

href的值可以是一个网址、一个文本文档、一个非文本文件路径，还可以实现一些功能。

当用户点击链接后各自有不同的意义：

  • #html元素id：跳转到指定id锚点，首页可直接用”#“。
  • 网址：在当前窗口或新窗口中打开链接。
  • 文本文档：打开文档查看内容。
  • 非文本文档路径：下载文件。
  • mailto:邮箱地址：调用本地程序发邮件。
  • tel:电话号码：调用本地程序拨打电话。
    …

元素定位

html元素的定位在css样式中可以利用 position 来定义,例如：

  • position: static; 静态定位 默认定位。

  • position：fixed; 固定定位 将html元素在页面上固定且不随滚动条滚动。

  • position: absolute; 绝对定位 优先参照有定位属性的父级元素否则参照body。

  • position: relative; 相对定位 参照文档流定位。
    …

导航条下拉菜单主要用到 absolute 和 relative。

事件

来看一段获取html按钮内容代码片段：

  1. <button onclick="console.log(this.innerText)">button内容</button>
  • 其中 onclick="console.log(this.innerText)" 是以事件属性方式添加事件。

表示这个按钮被点击后的操作是获取按钮的文本内容。

  • 也可以javascript对象属性方式添加事件，例如：
  1. <script>
  2.     document.querySelectorAll("#button-id")[0].onclick = function () {
  3.       console.log("点击一次1");
  4.     };
  5.     document.querySelectorAll("#button-id")[0].onclick = function () {
  6.       console.log("点击一次2");
  7.     };
  8. </script>

注意：以javascript对象属性方式添加事件的元素只会生效最后一次事件。

  • 如果要同时触发一个元素上的多个事件，使用javascript事件监听器：
  1. <script>
  2.     const but3 = document.querySelectorAll("button")[2];
  3.     but3.addEventListener("click", function () {
  4.       console.log("全部按钮1");
  5.     });
  6.     but3.addEventListener("click", function () {
  7.       console.log("全部按钮2");
  8.     });
  9.     but3.addEventListener("click", function () {
  10.       console.log("全部按钮3");
  11.     });
  12. <script>

点击按钮后浏览器控制台输出结果：

事件的触发阶段

  • 事件冒泡与捕获代码片段：
  1.  <body>
  2.     <ul>
  3.       <li><a href="#">点击链接</a></li>
  4.     </ul>
  5.   </body>
  6.   <script>
  7.     const a = document.querySelector("a");
  8.     const li = document.querySelector("li");
  9.     const ul = document.querySelector("ul");
  10.     const body = document.body;
  12.     // 事件冒泡，第三个参数默认是false
  13.     a.addEventListener("click", getTagName);
  14.     li.addEventListener("click", getTagName);
  15.     ul.addEventListener("click", getTagName);
  16.     body.addEventListener("click", getTagName);
  18.     // 事件捕获
  19.     a.addEventListener("click", getTagName, true);
  20.     li.addEventListener("click", getTagName, true);
  21.     ul.addEventListener("click", getTagName, true);
  22.     body.addEventListener("click", getTagName, true);
  24.     function getTagName() {
  25.       alert(this.tagName);
  26.     }
  27.   </script>

实际开发中多用于冒泡。

事件代理

事件代理的意义：通过非当前触发的事件代理当前触发事件，可以简化代码。

例如：

  1.   <body>
  2.     <ul>
  3.       <li>li1</li>
  4.       <li>li2</li>
  5.       <li>li3</li>
  6.       <li>li4</li>
  7.       <li>li5</li>
  8.       <li>li6</li>
  9.       <li>li7</li>
  10.       <li>li8</li>
  11.     </ul>
  12.   </body>
  13.   <script>
  14.     // 1.forEach()循环输出li内容
  15.     // const alla = document.querySelectorAll("li");
  16.     // alla.forEach(function (li) {
  17.     //   li.addEventListener("click", function () {
  18.     //     console.log(li.innerText);
  19.     //   });
  20.     // });
  22.     // 2.利用事件代理输出li，用ul冒泡代理li的输出，ev：事件对象
  23.     document.querySelector("ul").addEventListener("mouseover", function (ev) {
  24.       // 返回当前正在触发事件的元素，这里是li
  25.       console.log(ev.target);
  26.       // 返回事件绑定的元素，这里是ul
  27.       console.log(ev.currentTarget);
  28.     });
  29.   </script>

这个案例使用了事件监听和冒泡代理的方式取代了传统的forEach()循环输出，更加符合逻辑要求。

实例：导航条下拉菜单

html代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="style.css" />
  7.     <title>小刚的导航菜单demo</title>
  8.   </head>
  9.   <body>
  10.     <div class="nav">
  11.       <ul id="navbar" class="navbar">
  12.         <li class="link">
  13.           <a href="">首页</a>
  14.         </li>
  15.         <li class="link">
  16.           <a href="">技术论坛</a>
  17.         </li>
  18.         <li class="link">
  19.           <a href="">工具下载</a>
  20.           <ul id="page" class="page">
  21.             <li><a href="">PHP</a></li>
  22.             <li><a href="">HTML</a></li>
  23.             <li><a href="">CSS</a></li>
  24.             <li><a href="">JAVASCRIPT</a></li>
  25.           </ul>
  26.         </li>
  27.         <li class="link">
  28.           <a href="">手册下载</a>
  29.           <ul id="page" class="page">
  30.             <li><a href="">PHP</a></li>
  31.             <li><a href="">HTML</a></li>
  32.             <li><a href="">CSS</a></li>
  33.             <li><a href="">JAVASCRIPT</a></li>
  34.           </ul>
  35.         </li>
  36.         <li class="link">
  37.           <a href="">用户中心</a>
  38.         </li>
  39.       </ul>
  40.     </div>
  41.   </body>
  42.   <script>
  43.     // 获取下拉菜单
  44.     const navs = document.querySelectorAll("#navbar > li");
  45.     // 循环出每一个下拉菜单并添加鼠标划过与划出事件
  46.     navs.forEach(function (nav) {
  47.       nav.addEventListener("mouseover", showPage);
  48.       nav.addEventListener("mouseout", closePage);
  49.     });
  50.     // 为事件添加显示与隐藏方法（冒泡）
  51.     function showPage(ev) {
  52.       if (ev.target.nextElementSibling !== null) {
  53.         ev.target.nextElementSibling.style.display = "block";
  54.       }
  55.     }
  56.     function closePage(ev) {
  57.       if (ev.target.nextElementSibling !== null) {
  58.         ev.target.nextElementSibling.style.display = "none";
  59.       }
  60.     }
  61.   </script>
  62. </html>

外部样式表 style.css 

  1. /**
  2. 层叠样式表
  3. */
  4. * {
  5.   margin: 0;
  6.   padding: 0;
  7.   list-style: none;
  8. }
  10. a {
  11.   display: block;
  12.   height: 35px;
  13.   color: #898988;
  14.   text-decoration: none;
  15.   padding-top: 15px;
  16. }
  18. a:hover {
  19.   color: #e8e7e3;
  20.   background-color: #3f3f3f;
  21. }
  23. .nav {
  24.   position: fixed;
  25.   height: 50px;
  26.   width: 100%;
  27.   background-color: #e8e7e3;
  28.   box-shadow: 0 1px 1px rgb(154, 156, 156);
  29. }
  31. .navbar {
  32.   min-width: 1000px;
  33. }
  35. .link {
  36.   display: inline-block;
  37.   position: relative;
  38.   width: 100px;
  39.   text-align: center;
  40. }
  42. .page {
  43.   display: none;
  44.   position: absolute;
  45.   height: 200px;
  46.   width: 100px;
  47.   background-color: #e8e7e3;
  48. }
  50. .page li {
  51.   display: inline-block;
  52.   width: 100%;
  53. }

实现效果

导航条下拉菜单

总结

  1. 理解 <a> 标签的作用；
  2. css定位方式 absolute和relative 的区别及应用；
  3. html页面dom事件对象的运用，例如：onclick；
  4. javascript事件对象的运用，例如：ev.target、ev.currentTarget；
  5. javascript监听器的作用；
  6. 理解事件冒泡与捕获的区别及影响DOM元素的问题；

ps:不知为何，我的关闭菜单代码 closePage() 不需要判断冒泡影响的父元素，有待研究，怀疑是CSS样式的原因，有兴趣研究的还请赐教。

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：所谓事件冒泡，其实想一下，很简单的， 不是吗？
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录