RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 619016
Accepted
Павел
Павел
Asked:2020-01-25 04:37:57 +0000 UTC2020-01-25 04:37:57 +0000 UTC 2020-01-25 04:37:57 +0000 UTC

是否可以使用 html 组织指向下一个标签的链接?(一个 href = ...???)

  • 772

我找不到答案:是否可以使用 HTML 在代码中组织指向下一个标签的链接?

例如,到目前为止有一个内容未知的链接和几个具有 ID 的块。需要在 <a href = "..."> 中写入什么,以便过渡到代码中的下一个标签(取决于当前位置)。

如果不可能,如何做到这一点?

javascript
  • 3 3 个回答
  • 10 Views

3 个回答

  • Voted
  1. DimenSi
    2020-01-25T04:51:30Z2020-01-25T04:51:30Z

    如果我理解正确,你希望链接是一个,但它仍然通过所有锚点,那么你可以做类似的事情。

    在这个例子中:

    1. 我创建了一个数组,我将在其中添加所有链接。
    2. 我收集所有 h2,通过一个循环并将它们的 ID 保存在一个数组中。
    3. 接下来,我从零创建一个空计数器(因为数组中的索引从零开始)
    4. 我给链接绑定了一个点击函数,其中我首先检查计数器是否不大于数组,然后我在 href 属性中替换链接中的链接,然后我增加计数器。

    忽略let和const,可以用var代替。

    let arr = [];
    
    $('h2').each(function() {
    	arr.push(this.getAttribute('id'));
    });
    
    let counter = 0;
    
    $('.link').on('click', function() {
    	if (counter <= arr.length - 1) {
      	const $this = $(this);
        $this.prop('href', '#' + arr[counter]);
        counter++;
        console.log(counter);
      }
    });
    .link {
      position: fixed;
      top: 0;
      right: 0;
      padding: 20px;
      background-color: black;
      color: white;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a href="#link-1" class="link">Следующий</a>
    
    <div class="content">
      <div class="block">
        <h2 id="link-1">Заголовок 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit perferendis placeat, autem repellendus, ab quisquam molestiae dolorem neque minima veniam nesciunt veritatis. Natus laborum enim, hic omnis nostrum! Repudiandae, eveniet, dolore unde eius ipsa cum natus, aliquam perferendis optio a voluptatum et ex earum facilis nihil sint nemo suscipit tempore expedita. Facilis dolore harum aliquid, sed voluptatibus tempore, delectus fugiat ratione, obcaecati, fuga earum quae. Corrupti architecto tempore illum quas fugit quibusdam perspiciatis laborum possimus, eos, fuga iure. Harum magni, rerum illum autem. Expedita, eum ullam sunt doloribus eius ducimus numquam doloremque perferendis deleniti architecto. Fugiat saepe nemo consequuntur aperiam harum vero, accusamus aliquid iste placeat consectetur praesentium ex iure quis quos nisi modi id molestias pariatur commodi, ipsam vel voluptatum, laudantium distinctio? Molestias, blanditiis, aut. Minus sequi provident velit, perferendis eos doloribus reiciendis incidunt tempore ipsum sit optio debitis iste explicabo a. Impedit alias delectus mollitia doloremque, laudantium, tenetur id architecto, minus saepe vitae magni et quo voluptatibus, pariatur corrupti sequi cum ut distinctio est praesentium. Sed nihil eveniet modi id dolorum aspernatur, quo blanditiis dolores ea molestiae consequuntur, illo libero ab placeat facere ullam animi labore in maxime. Aliquid laudantium laborum ipsum beatae quia, sint vero veritatis temporibus quae labore in obcaecati voluptatibus commodi explicabo consequatur id, et reiciendis animi voluptates porro enim omnis libero, possimus nisi. Reprehenderit, aspernatur minima cumque placeat perferendis! A expedita unde dolorem, quia consequatur eligendi facere, magni aspernatur inventore veritatis id, nostrum earum provident, aliquid similique eveniet. Hic vitae ipsam aperiam. Maiores, quis.</p>
      </div>
      <div class="block">
        <h2 id="link-2">Заголовок 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit perferendis placeat, autem repellendus, ab quisquam molestiae dolorem neque minima veniam nesciunt veritatis. Natus laborum enim, hic omnis nostrum! Repudiandae, eveniet, dolore unde eius ipsa cum natus, aliquam perferendis optio a voluptatum et ex earum facilis nihil sint nemo suscipit tempore expedita. Facilis dolore harum aliquid, sed voluptatibus tempore, delectus fugiat ratione, obcaecati, fuga earum quae. Corrupti architecto tempore illum quas fugit quibusdam perspiciatis laborum possimus, eos, fuga iure. Harum magni, rerum illum autem. Expedita, eum ullam sunt doloribus eius ducimus numquam doloremque perferendis deleniti architecto. Fugiat saepe nemo consequuntur aperiam harum vero, accusamus aliquid iste placeat consectetur praesentium ex iure quis quos nisi modi id molestias pariatur commodi, ipsam vel voluptatum, laudantium distinctio? Molestias, blanditiis, aut. Minus sequi provident velit, perferendis eos doloribus reiciendis incidunt tempore ipsum sit optio debitis iste explicabo a. Impedit alias delectus mollitia doloremque, laudantium, tenetur id architecto, minus saepe vitae magni et quo voluptatibus, pariatur corrupti sequi cum ut distinctio est praesentium. Sed nihil eveniet modi id dolorum aspernatur, quo blanditiis dolores ea molestiae consequuntur, illo libero ab placeat facere ullam animi labore in maxime. Aliquid laudantium laborum ipsum beatae quia, sint vero veritatis temporibus quae labore in obcaecati voluptatibus commodi explicabo consequatur id, et reiciendis animi voluptates porro enim omnis libero, possimus nisi. Reprehenderit, aspernatur minima cumque placeat perferendis! A expedita unde dolorem, quia consequatur eligendi facere, magni aspernatur inventore veritatis id, nostrum earum provident, aliquid similique eveniet. Hic vitae ipsam aperiam. Maiores, quis.</p>
      </div>
      <div class="block">
        <h2 id="link-3">Заголовок 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit perferendis placeat, autem repellendus, ab quisquam molestiae dolorem neque minima veniam nesciunt veritatis. Natus laborum enim, hic omnis nostrum! Repudiandae, eveniet, dolore unde eius ipsa cum natus, aliquam perferendis optio a voluptatum et ex earum facilis nihil sint nemo suscipit tempore expedita. Facilis dolore harum aliquid, sed voluptatibus tempore, delectus fugiat ratione, obcaecati, fuga earum quae. Corrupti architecto tempore illum quas fugit quibusdam perspiciatis laborum possimus, eos, fuga iure. Harum magni, rerum illum autem. Expedita, eum ullam sunt doloribus eius ducimus numquam doloremque perferendis deleniti architecto. Fugiat saepe nemo consequuntur aperiam harum vero, accusamus aliquid iste placeat consectetur praesentium ex iure quis quos nisi modi id molestias pariatur commodi, ipsam vel voluptatum, laudantium distinctio? Molestias, blanditiis, aut. Minus sequi provident velit, perferendis eos doloribus reiciendis incidunt tempore ipsum sit optio debitis iste explicabo a. Impedit alias delectus mollitia doloremque, laudantium, tenetur id architecto, minus saepe vitae magni et quo voluptatibus, pariatur corrupti sequi cum ut distinctio est praesentium. Sed nihil eveniet modi id dolorum aspernatur, quo blanditiis dolores ea molestiae consequuntur, illo libero ab placeat facere ullam animi labore in maxime. Aliquid laudantium laborum ipsum beatae quia, sint vero veritatis temporibus quae labore in obcaecati voluptatibus commodi explicabo consequatur id, et reiciendis animi voluptates porro enim omnis libero, possimus nisi. Reprehenderit, aspernatur minima cumque placeat perferendis! A expedita unde dolorem, quia consequatur eligendi facere, magni aspernatur inventore veritatis id, nostrum earum provident, aliquid similique eveniet. Hic vitae ipsam aperiam. Maiores, quis.</p>
      </div>
      <div class="block">
        <h2 id="link-4">Заголовок 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit perferendis placeat, autem repellendus, ab quisquam molestiae dolorem neque minima veniam nesciunt veritatis. Natus laborum enim, hic omnis nostrum! Repudiandae, eveniet, dolore unde eius ipsa cum natus, aliquam perferendis optio a voluptatum et ex earum facilis nihil sint nemo suscipit tempore expedita. Facilis dolore harum aliquid, sed voluptatibus tempore, delectus fugiat ratione, obcaecati, fuga earum quae. Corrupti architecto tempore illum quas fugit quibusdam perspiciatis laborum possimus, eos, fuga iure. Harum magni, rerum illum autem. Expedita, eum ullam sunt doloribus eius ducimus numquam doloremque perferendis deleniti architecto. Fugiat saepe nemo consequuntur aperiam harum vero, accusamus aliquid iste placeat consectetur praesentium ex iure quis quos nisi modi id molestias pariatur commodi, ipsam vel voluptatum, laudantium distinctio? Molestias, blanditiis, aut. Minus sequi provident velit, perferendis eos doloribus reiciendis incidunt tempore ipsum sit optio debitis iste explicabo a. Impedit alias delectus mollitia doloremque, laudantium, tenetur id architecto, minus saepe vitae magni et quo voluptatibus, pariatur corrupti sequi cum ut distinctio est praesentium. Sed nihil eveniet modi id dolorum aspernatur, quo blanditiis dolores ea molestiae consequuntur, illo libero ab placeat facere ullam animi labore in maxime. Aliquid laudantium laborum ipsum beatae quia, sint vero veritatis temporibus quae labore in obcaecati voluptatibus commodi explicabo consequatur id, et reiciendis animi voluptates porro enim omnis libero, possimus nisi. Reprehenderit, aspernatur minima cumque placeat perferendis! A expedita unde dolorem, quia consequatur eligendi facere, magni aspernatur inventore veritatis id, nostrum earum provident, aliquid similique eveniet. Hic vitae ipsam aperiam. Maiores, quis.</p>
      </div>
    </div>

    • 3
  2. Qwertiy
    2020-01-25T04:42:57Z2020-01-25T04:42:57Z

    没有脚本 - 仅当您对 id 进行硬编码时:

    <h1 id=s1>Возможно ли 1?</h1>
    <a href=#s2>next</a>
    <p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
    <p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
    <p>Если невозможно, то как это можно реализовать?
      
    <h1 id=s2>Возможно ли 2?</h1>
    <a href=#s1>prev</a> <a href=#s3>next</a>
    <p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
    <p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
    <p>Если невозможно, то как это можно реализовать?
      
    <h1 id=s3>Возможно ли 3?</h1>
    <a href=#s2>prev</a> <a href=#s4>next</a>
    <p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
    <p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
    <p>Если невозможно, то как это можно реализовать?
      
    <h1 id=s4>Возможно ли 4?</h1>
    <a href=#s3>prev</a>
    <p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
    <p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
    <p>Если невозможно, то как это можно реализовать?

    • 2
  3. Best Answer
    Qwertiy
    2020-01-25T04:58:21Z2020-01-25T04:58:21Z

    你可以用脚本做这样的事情,但有一个问题 - 如果用户滚动页面,那么过渡不会转到屏幕上的下一个之后,而是转到他去的那个之后的下一个通过点击链接。

    document.getElementById('next').addEventListener('click', function () {
      var next = document.querySelector("h1:target ~ h1[id]")
              || document.querySelector("h1:target")
              || document.querySelector("h1[id] ~ h1[id]")
      
      if (next) this.href = "#" + next.id
    })
    
    document.getElementById('prev').addEventListener('click', function () {
      var prev = document.querySelector("h1:target")
      
      if (prev)
        while (prev = prev.previousElementSibling /* assignment */)
          if (prev.tagName === 'H1' && prev.id)
            break;
          
      this.href = prev ? "#" + prev.id : '#'
    })
    aside {
      position: fixed;
      right: 8px;
      top: 8px;
    }
    <aside>
      <a id=prev href=#>prev</a>
      <a id=next href=#>next</a>
    </aside>
    
    <h1 id=s1>Возможно ли 1?</h1>
    <p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
    <p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
    <p>Если невозможно, то как это можно реализовать?
      
    <h1 id=s2>Возможно ли 2?</h1>
    <p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
    <p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
    <p>Если невозможно, то как это можно реализовать?
      
    <h1 id=s3>Возможно ли 3?</h1>
    <p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
    <p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
    <p>Если невозможно, то как это можно реализовать?
      
    <h1 id=s4>Возможно ли 4?</h1>
    <p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
    <p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
    <p>Если невозможно, то как это можно реализовать?

    • 2

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    Python 3.6 - 安装 MySQL (Windows)

    • 1 个回答
  • Marko Smith

    C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

    • 2 个回答
  • Marko Smith

    返回指针的函数

    • 1 个回答
  • Marko Smith

    我使用 django 管理面板添加图像,但它没有显示

    • 1 个回答
  • Marko Smith

    这些条目是什么意思,它们的完整等效项是什么样的

    • 2 个回答
  • Marko Smith

    浏览器仍然缓存文件数据

    • 1 个回答
  • Marko Smith

    在 Excel VBA 中激活工作表的问题

    • 3 个回答
  • Marko Smith

    为什么内置类型中包含复数而小数不包含?

    • 2 个回答
  • Marko Smith

    获得唯一途径

    • 3 个回答
  • Marko Smith

    告诉我一个像幻灯片一样创建滚动的库

    • 1 个回答
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Алексей Шиманский 如何以及通过什么方式来查找 Javascript 代码中的错误? 2020-08-03 00:21:37 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    user207618 Codegolf——组合选择算法的实现 2020-10-23 18:46:29 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5