锚标签在列表项中不起作用
[英]Anchor tag not working inside List Item
问题描述
https://jsfiddle.net/1exbczjy/
<body>
<section class="main">
<form class="search" action="">
<input type="search" id ="searchit" placeholder="search.." />
<ul class="results" id="searchlist">
</ul>
</form>
</section>
</body>
这是我尝试运行的代码的演示，我的原始代码包含 js 文件，该文件使用 innerHTML 函数动态填充我的 ul 类，但输出与我提供的虚拟列表数据相同。
我不明白为什么我的列表标签不起作用。 我尝试使用本网站上提供的其他答案来解决它，检查 z 索引以及 a 和 li 标签的绝对和相对位置。
3 个解决方案
解决方案1
3 2017-06-27 06:47:43
根本原因是：当锚标签被点击时， .search input失去了它的:focus状态，这使得.search input:focus + .results { display: block }禁用并且.search .results再次display为none -- As <a>标签不再存在于页面上，什么也没有发生。 它与ul或li无关。
这是一个简化的示例： https://jsfiddle.net/cshao/rtonLr4z/ ， <a>不会像问题中那样工作。
解决方案2
3 已采纳 2017-06-27 07:02:49
原因是因为click ， input失去了它的:focus （正如shaochuancs指出的那样）并且在注册点击锚点之前内容被隐藏。 click事件由mousedown和mouseup事件组成。 失去焦点是在页面上任何地方的mousedown触发的。 所以只要防止:focus on mousedown在锚标签上丢失就行了。 其余代码将按预期运行，因为锚标记单击是在mouseup上触发的。
所以这个问题可以通过一些基本的 javascript/jQuery 来处理，只需在锚标签上的mousedown上使用preventDefault()即可。
$("a").mousedown(function(ev) {
ev.preventDefault();
}
请注意，在此代码片段中，链接不会加载，因为它被框架阻止了。 但是你可以在控制台看到链接被点击了。
$("a").mousedown(function(ev) { ev.preventDefault(); console.log($(this).attr("href")); console.log("Click triggered"); });
/* * Copyright (c) 2012 Thibaut Courouble * Licensed under the MIT License ================================================== */ body { background: #f7f7f7; color: #404040; font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; } a { color: #1e7ad3; text-decoration: none; } a:hover { text-decoration: underline } .container, .main { width: 640px; margin-left: auto; margin-right: auto; height: 300px; } .main { margin-top: 50px } input { font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; color: #555860; } .search { position: relative; margin: 0 auto; width: 300px; } .search input { height: 26px; width: 100%; padding: 0 12px 0 25px; border-width: 1px; border-style: solid; border-color: #a8acbc #babdcc #c0c3d2; border-radius: 13px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; } .search input:focus { outline: none; border-color: #66b1ee; -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); } .search input:focus+.results { display: block } .search .results { display: none; position: absolute; top: 35px; left: 0; right: 0; z-index: 10000; padding: 0; margin: 0; border-width: 1px; border-style: solid; border-color: #cbcfe2 #c8cee7 #c4c7d7; border-radius: 3px; background-color: #fdfdfd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4)); background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4); background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4); background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4); background-image: -o-linear-gradient(top, #fdfdfd, #eceef4); background-image: linear-gradient(top, #fdfdfd, #eceef4); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .search .results li { display: block } .search .results li:first-child { margin-top: -1px } .search .results li:first-child:before, .search .results li:first-child:after { display: block; content: ''; width: 0; height: 0; position: absolute; left: 50%; margin-left: -5px; border: 5px outset transparent; } .search .results li:first-child:before { border-bottom: 5px solid #c4c7d7; top: -11px; } .search .results li:first-child:after { border-bottom: 5px solid #fdfdfd; top: -10px; } .search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none } .search .results li:last-child { margin-bottom: -1px } .search .results li a { display: block; position: relative; margin: 0 -1px; padding: 6px 40px 6px 10px; color: #808394; font-weight: 500; text-shadow: 0 1px #fff; border: 1px solid transparent; border-radius: 3px; } .search .results li a span { font-weight: 200 } .search .results li a:before { content: ''; width: 18px; height: 18px; position: absolute; top: 50%; right: 10px; margin-top: -9px; } .search .results li a:hover { text-decoration: none; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); border-color: #2380dd #2179d5 #1a60aa; background-color: #338cdf; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf)); background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf); background-image: -moz-linear-gradient(top, #59aaf4, #338cdf); background-image: -ms-linear-gradient(top, #59aaf4, #338cdf); background-image: -o-linear-gradient(top, #59aaf4, #338cdf); background-image: linear-gradient(top, #59aaf4, #338cdf); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); } :-moz-placeholder { color: #a7aabc; font-weight: 200; } ::-webkit-input-placeholder { color: #a7aabc; font-weight: 200; } .search li { padding: 0px; } .search li a { margin: 0px; display: block; width: 100%; height: 100%; } .lt-ie9 .search input { line-height: 26px } /*adding effect when the mouse is hovered over list item*/ /*adding effect when the mouse is hovered over list item*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>Input Autocomplete Suggestions Demo</title> <link rel="shortcut icon" href="http://designshack.net/favicon.ico"> <link rel="icon" href="http://designshack.net/favicon.ico"> <body> <section class="main"> <form class="search" action=""> <input type="search" id="searchit" placeholder="search.." /> <ul class="results" id="searchlist"> <li><a href="https://www.google.com">Tag A</a></li> <li><a href="https://www.facebook.com">Tag B</a></li> </ul> </form> </section> </body>
解决方案3
0 2020-04-02 12:57:43
还有另一种可能。 如果您将 Anchor 的装饰设置为 none 并在悬停时更改 li 背景，但如何使这项工作发挥作用是另一回事。
在UL内部使用列表项和锚标记附加内容<li><a></a></li>
[英]Append content inside UL with list item and anchor tag <li><a></a></li>
在 Backbone 中，如何在列表项中的锚标记上获取单击事件
[英]In Backbone how to get click event on an anchor tag within a list item
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.