javascript - div 之间链接跳转操作错误是怎么回事？
想问一下我做了2个div之间的跳转操作，div之间跳转行为用a标签 href="#"进行跳转，但是我的本意是想做链接来进行跳转操作，不知道为什么点击div的空白处也会进行div的跳转行为
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: flex; justify-content: space-between; } .box { width: 500px; height: 500px; text-align: center; line-height: 100px; color: white; font-size: 18px; cursor: pointer; display: block; } #box1 { background-color: red; } #box2 { background-color: blue; display: none; } #box3 { background-color: green; display: none; } </style></head><body><div class="container" onclick="handleContainerClick(event)"> <a id="box1" class="box" href="#" onclick="showBox('box2')">Click to go to Box 2</a> <a id="box2" class="box" href="#" onclick="showBox('box3')">Click to go to Box 3</a> <div id="box3" class="box">You are in Box 3</div></div><script> function handleContainerClick(event) { // 获取点击的元素 const target = event.target; // 判断点击的是否为链接（a 元素） if (target.tagName.toLowerCase() === 'a') { // 链接的默认行为会继续执行 return; } // 如果点击的是包含链接的盒子，则执行链接跳转 if (target.classList.contains('box')) { const boxId = target.id; showBox(boxId); } } function showBox(boxId) { // 隐藏所有的盒子 document.getElementById('box1').style.display = 'none'; document.getElementById('box2').style.display = 'none'; document.getElementById('box3').style.display = 'none'; // 显示指定的盒子 document.getElementById(boxId).style.display = 'block'; }</script></body></html>我做了if判断也没用
共有2个答案
你设置了父元素.container {display: flex}，当你这样设置的时候，它的子元素都会变成块级元素，而你还设置了.box的元素的宽高，也就是说现在你父元素的高等于子元素的高，而父元素因为是块级元素，宽会自动占满！！此时，你点击文字之外，你以为你点击的是父元素，其实你点击的是a标签！！！
所以你的代码并没有问题，而是你不熟悉规则导致的问题，你可以运行一下代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { /* display: flex; */ /* justify-content: space-between; */ /* 这里设置父元素的宽高 */ width: 500px; height: 500px; border: 1px solid black; } .box { /* width: 500px; */ /* height: 500px; */ /* text-align: center; line-height: 100px; color: white; font-size: 18px; cursor: pointer; */ /* display: block; */ } #box1 { background-color: red; } #box2 { background-color: blue; display: none; } #box3 { background-color: green; display: none; } </style></head><body> <div class="container" onclick="handleContainerClick(event)"> <a id="box1" class="box" href="#" onclick="showBox('box2')">Click to go to Box 2</a> <a id="box2" class="box" href="#" onclick="showBox('box3')">Click to go to Box 3</a> <div id="box3" class="box">You are in Box 3</div> </div> <script> function handleContainerClick(event) { console.log(event.target); // 获取点击的元素 const target = event.target; // 判断点击的是否为链接（a 元素） if (target.tagName.toLowerCase() === 'a') { // 链接的默认行为会继续执行 return; } // 如果接点击的是包含链的盒子，则执行链接跳转 if (target.classList.contains('box')) { const boxId = target.id; showBox(boxId); } } function showBox(boxId) { console.log(boxId); // 隐藏所有的盒子 document.getElementById('box1').style.display = 'none'; document.getElementById('box2').style.display = 'none'; document.getElementById('box3').style.display = 'none'; // 显示指定的盒子 document.getElementById(boxId).style.display = 'block'; } </script></body></html>
没尝试你的 demo，看代码似乎应该是要做选项卡类型的一些效果。
不知道是不是这样的呢。
http://lab.tianyizone.com/animation%20vs%20transition/animati...
http://lab.tianyizone.com/animation%20vs%20transition/transit...
-
让我们看一种更复杂一点的情况 我们有两个已经初始化完成的View（left view 和 right view)。这种情况下，所有在left view 中的链接加载的页面都会放在 left view 中，所有在right view中的链接加载的页面都会放在 right view中。 但是我们现在需要一些在 left view 中的链接加载的页面放进 right view中。这叫 View间链接。我
-
本文向大家介绍路由之间是怎么跳转的？有哪些方式？相关面试题，主要包含被问及路由之间是怎么跳转的？有哪些方式？时的应答技巧和注意事项，需要的朋友参考一下 首先最简单的方法： to里面可以写对象 方法二：编程式当行： this.$router.go/replace/push 注意这里有一个小bug，vue2.0-中没有捕获这个异常，就是多次点击请求同一个路由会报错误，你可以手动捕获异常 在mins.j
-
VSCode v1.79.2 当使用 pnpm 安装依赖的时候，想直接跳到源码的定义处的时候报错了，报'No source definitions found.' 比如这个，我想跳 readFile 的源码实现（右键go to source Definition）的时候就报了这个，npm 装的就可以，有什么方法可以让Vscode也支持呢？ 1：给Vscode提PR或者他们的开发人员加入这个软链接的
-
本文向大家介绍UIWebView和JavaScript之间是怎么交互的？相关面试题，主要包含被问及UIWebView和JavaScript之间是怎么交互的？时的应答技巧和注意事项，需要的朋友参考一下 UlWebView是i〇S SDK中渲染网面的控件，在显示网页的时候，我们可以hack网页 然后显示想显示的内容。其中就要用至JavaScript的知识，而UlWebView与javascript交互
-
实现两个 MIP 页面之间互相跳转的功能。 标题 内容 类型 通用 支持布局 N/S 所需脚本 https://c.mipcdn.com/static/v2/mip-link/mip-link.js 升级说明 由于 <mip-link> 的标签不利于搜索引擎识别，故将 <mip-link> 的自定义标签升级成 <a> 标签上直接扩展，使用方法见下文。之前的方式还是能够正常使用。 示例 <a dat
-
本文向大家介绍在a标签中，怎样防止链接跳转？相关面试题，主要包含被问及在a标签中，怎样防止链接跳转？时的应答技巧和注意事项，需要的朋友参考一下 css添加 js click 中 将href属性设置为