Должен ли я использовать «Имя» или «ID» в качестве HTML Якорь? - PullRequest
Новая
       15

Должен ли я использовать «Имя» или «ID» в качестве HTML Якорь?

1 голос
/ 07 февраля 2020

Я немного растерялся, я хочу создать ссылку на моей странице HTML, которая будет переходить к указанному разделу c на другой странице. Я видел примеры с «Name» в качестве якоря и я видел примеры с «ID».

Как я понял, «Name» - это старый стиль, а «ID» - это новый стиль, который поддерживается новыми браузерами. Но что, если я хочу быть уверен, что моя ссылка будет работать ОБА в старом и новом браузерах? Могу ли я как-то объединить «Имя» и «Идентификатор», чтобы моя ссылка работала в любом браузере, независимо от того, старый он или новый?

Простой пример кода подойдет.

Спасибо !

Ответы [ 2 ]

0 голосов
/ 07 февраля 2020

Насколько я знаю, атрибут name нельзя использовать в качестве ссылки на ссылку в URL. Кроме того, name нельзя использовать для всех видов элементов HTML. Например, элементы <a> не имеют действительного атрибута name.

Атрибут name используется для полей формы и не является уникальным, как атрибут id. См. Здесь: Разница между атрибутами id и name в HTML

Используйте атрибут id для привязки, он должен работать так, как ожидается в любом браузере. Посмотрите на этот ответ для деталей реализации: Должен ли я сделать HTML Якоря с именем или идентификатором?

0 голосов
/ 07 февраля 2020

Id лучший способ сделать. Пожалуйста, смотрите ниже - 

<ul class="tabs_list_block">
  <li><a href="#menu1">Menu1</a></li>
  <li><a href="#menu2">Menu2</a></li>
  <li><a href="#menu3">Menu3</a></li>
  <li><a href="#menu4">Menu4</a></li>
</ul>

<div class="tab_content">
  <div id="menu1" class="tab_content_row tab_content_row01">Menu1</div>
  <div id="menu2" class="tab_content_row tab_content_row02">Menu2</div>
  <div id="menu3" class="tab_content_row tab_content_row03">Menu3</div>
  <div id="menu4" class="tab_content_row tab_content_row04">Menu4</div>
</div>

.tabs_list_block {
    width: 100%;
    min-height: 50px; 
    display: flex;
    align-items: center;
    border-bottom: solid 1px #ccc;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff;
  } 
  .tabs_list_block li {
    border-right: solid 1px #ccc;
    flex: 1 1 auto;
    height: 100%;
    text-align: center;
  }
  .tabs_list_block li:last-child {
    border-right: 0;
  }
  .tabs_list_block li a {
    width: 100%;
    height: 100%;
    padding: 16px;
    color: #ccc;
  }
  .tab_content {
    margin-top: 50px;
  }
  .tab_content_row {
      min-height: calc(100vh - 50px);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .tab_content_row01 {
    background-color: #ffbf73;
  }
  .tab_content_row02 {
    background-color: #eaff73;
  }
  .tab_content_row03 {
    background-color: #8cf9f0;
  }
  .tab_content_row04 {
    background-color: #ddc4ff;
  }

<script type="text/javascript">
$(".tabs_list_block").find("a").click(function(e) {
    e.preventDefault();
    var section = $(this).attr("href");
    $("html, body").animate({
        scrollTop: $(section).offset().top - 0
    });
});

...