anchor 相关问题

我正在使用隐藏的锚点来取消对更改的引导选择，如下所示： HTML：我正在使用隐藏的锚点来取消对更改的引导选择，如下所示： HTML： <select id="SelectAddress" name="SelectAddress" class="selectpicker" title="Select an address" data-header="Select an address"> <option id="1" value="1" selected >First address</option> <option id="2" value="2" >Second address</option> </select> jQuery： $("#SelectAddress").on("change", function() { //...mycode... $("#AFocus").focus(); }); $("#AFocus").focus(); 使选择选择器失去焦点，但它也使目标页面上升。 AFocus 位于页面顶部，所以... 如何在不使用像我的AFocus这样的锚标记而不滚动页面的情况下取消选择选择器的焦点？这是一个示例：http://jsfiddle.net/ya0o7hzb/向下滚动页面以查看 bootstrap-select。 bootstrap-select 将在 DOM 中添加一些 HTML，如下所示： <div class="btn-group bootstrap-select"> <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" data-id="SelectAddress" title="Address 1" aria-expanded="false"> <span class="filter-option pull-left"> Address 1</span>  <span class="bs-caret"> <span class="caret"> </span> </span> </button> <div class="dropdown-menu open" role="combobox" style="padding-top: 0px; max-height: 297px; overflow: hidden; min-height: 37px;"> <div class="popover-title"> <button type="button" class="close" aria-hidden="true"> ×</button> Select an address</div> <ul class="dropdown-menu inner" role="listbox" aria-expanded="false" style="max-height: 248px; overflow-y: auto; min-height: 0px;"> <li data-original-index="1" class="selected"> <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"> <span class="text"> Address 1</span> <span class="glyphicon glyphicon-ok check-mark"> </span> </a> </li> <li data-original-index="2" class=""> <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"> <span class="text"> Address 2</span> <span class="glyphicon glyphicon-ok check-mark"> </span> </a> </li> </ul> </div> <select id="SelectAddress" name="SelectAddress" class="selectpicker" title="Select an address" data-header="Select an address" onchange="blur_picker('SelectAddress')" tabindex="-98"> <option class="bs-title-option" value=""> Select an address</option> 所以你必须blur()包含类btn的按钮： $(".btn").blur(); 工作示例：http://jsfiddle.net/93ohvn0j/ 试试这个。这可能会起作用。 <select id="SelectAddress" name="SelectAddress" class="selectpicker" title="Select an address" data-header="Select an address" onChange="blur_picker('SelectAddress')"> <option id="1" value="1" selected >First address</option> <option id="2" value="2" >Second address</option> function blur_picker ( element ) { element = document.getElementById(element); element.blur; } 希望这有帮助！

jquery twitter-bootstrap scroll anchor bootstrap-selectpicker

回答 0 投票 0

折叠下方的锚链接（角度）

我真的很惊讶，到目前为止还没有关于这个话题的讨论 - 我找不到任何人问这个问题，但我们在这里。如何处理拥有

angular lazy-loading anchor spartacus-storefront

回答 1 投票 0

如何避免 iframe 中的锚点滚动父页面

所以，问题是：我有一个很长的页面，中间有一个 iframe。现在，如果在 iframe 中单击锚点，整个页面就会滚动到 iframe，这是我想避免的。 ...

html iframe anchor

回答 7 投票 0

如何将偏移量应用于另一页面上的#link

我有一个网站，基本上是 80% 的 index.html 加上一些小子页面。 Index.html 分为几个部分。但是，导航的位置：固定，高度为 - 比如说 - 100px，所以链接...

html css anchor offset

回答 2 投票 0

无法使用 HTML5 下载属性下载文件

我正在尝试按照对我来说一直有效的方式创建下载链接。但现在它不断将我重定向到 Google 文档 – 我以前从未经历过这种情况，这应该是一个简单的任务......

html download anchor google-docs

回答 2 投票 0

SQL注入、注释方式

我正在研究它们背后的注入和技巧，所以我遇到了用 # 注释 MySQL 查询的方法。正如我们所知道的在 HTML 中使用命名锚点，在这种情况下注入到 U...

php html anchor

回答 3 投票 0

HTML5 中仅限 JavaScript 的链接

我知道这个问题有很多答案，但没有一个让我满意。有没有官方的 HTML5 方法来处理没有 href 的可点击元素？ ...

javascript html anchor semantic-markup

回答 4 投票 0

如何锚定到折叠的 HTML 详细信息元素内的目标元素

下面的代码有一个可以展开和折叠的元素。在其可折叠内容中，我们有一个锚定的元素。下面的链接“To”标题指的是... 下面的代码有一个可以展开和折叠的 <details> 元素。在其可折叠内容中，我们有一个锚定的 <div> 元素。下面的链接To header指的是这个锚点。当 <details> 元素折叠时，单击该链接在 Firefox 和可能较旧版本的 Chrome1 中不会执行任何操作。当 <details> 展开时，单击链接会向上滚动到 <details> 元素。有没有办法让 <details> 在折叠时点击链接 To header 自动展开？ <details> <summary>Header</summary> <div id=anchored> Should anchor here. </div> </details><br style="font-size:100vh;"> <a href="#anchored">To Header</a> 1 当这个问题最初发布时，它在当前版本的 Chrome 上不起作用，但现在可以了。然而，从 Firefox 129.0 开始，它仍然无法在该浏览器中运行。 JavaScript 解决方案如果#目标不可见（详细信息已关闭）：在 anchor 元素上单击，找到其 #target, 然后，找到 #target 最接近 details 元素并将其属性 open 设置为 true（对所有 <details> 祖先重复） const openDetailsIfAnchorHidden = (evt) => { const target = evt.currentTarget.getAttribute("href"); // "#anchored" const elTarget = document.querySelector(target); if (!elTarget) return; // No such element in DOM. Do nothing if (elTarget.offsetHeight > 0 || elTarget.getClientRects().length) return; // Already visible // Open all <details> ancestors let elDetails = elTarget.closest("details"); while (elDetails) { if (elDetails.matches("details")) elDetails.open = true; elDetails = elDetails.parentElement; } } document.querySelectorAll("[href^='#']").forEach((el) => { el.addEventListener("click", openDetailsIfAnchorHidden); }); Don't open summary.<br> Scroll to the bottom of the page, and click the anchor.<br> Summary should open and the page should scroll to the target. <details> <summary>Header</summary> <div id="anchored">DETAILS OPEN! Should anchor here.</div> </details> <p style="height:100vh;"></p> <a href="#anchored">Open details and scroll to #anchored</a> 使用 jQuery $("[href^='#']").on("click", function() { const $target = $(this.getAttribute("href")); if ($target.is(":hidden")) { $target.parents("details").prop("open", true); } }); Don't open summary.<br> Scroll to the bottom of the page, and click the anchor.<br> Summary should open and the page should scroll to the target. <details> <summary>Header</summary> <div id="anchored">DETAILS OPEN! Should anchor here.</div> </details> <p style="height:100vh;"></p> <a href="#anchored">Open details and scroll to #anchored</a> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> Chrome 似乎默认工作。如果 target-ed 元素位于（折叠的）<details> 元素内，则 should 打开/展开它。但是，正如评论中所报告的，Firefox 不会（默认）打开目标跟踪上的 <details>。 Don't open summary.<br> Scroll to the bottom of the page, and click the anchor.<br> Summary should open and the page should scroll to the target. <details> <summary>Header</summary> <div id="anchored">DETAILS OPEN! Should anchor here.</div> </details> <p style="height:100vh;"></p> <a href="#anchored">Open details and scroll to #anchored</a> 前提是您有每个详细信息的 ID。如果您有多个相互包围的对象，这将起作用。非常感谢@Roko C. Buljan const openDetailsIfAnchorHidden = (evt) => { const el = evt.target; let details = document.querySelector(el.getAttribute("href")); if ( !!details.offsetHeight || details.getClientRects().length ) return; while (details != null) { details = details.closest("details:not(#" + details.id + ")"); if (details == null) return; const summary = details.querySelector("summary"); details.setAttribute('open', ''); } } [...document.querySelectorAll("[href^='#']")].forEach( el => el.addEventListener("click", openDetailsIfAnchorHidden ) ); Don't open summary.<br> Scroll to the bottom of page and click the link.<br> Summary should open and the page scroll. <details id=d1> <summary>Header</summary> <details id=d2><summary>Header 2</summary><div id=anchored>Should anchor here.</div></details> </details> <p style="height:100vh;"></p> <a href="#anchored">To Header</a>

html anchor

回答 2 投票 0

anchor 相关问题

最新问题