Якорная ссылка не работает при использовании неупорядоченного списка - PullRequest
Новая
       92

Якорная ссылка не работает при использовании неупорядоченного списка

0 голосов
/ 12 июля 2020

Я написал HTML документ с семью якорными ссылками для перехода к другому разделу на странице. Однако работают только первая и последняя ссылки, а остальные не работают. Я клонировал первый раздел, который работает нормально, а затем изменил идентификатор на второй раздел. И это заставило работать вторую якорную ссылку. Итак, я знаю, что где-то у меня второй-второй последний раздел не работает. Однако я не могу найти, где не так. Мой код прошел валидатор w3.org. Может ли кто-нибудь заглянуть в мой код, чтобы узнать, в чем проблема. Я все еще новичок, поэтому, пожалуйста, go полегче со мной. Спасибо. 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Jade Ichinose Resume</title>
</head>

<body>
  <h1>Jade</h1>
  <span id="email">Email:</span>
  <span id="phone">Mobile:</span>
  <a href="linkedinlink">My LinkedIn Profile</a>
  <section>
    <h3>Overview</h3>
    <ul>
      <!-- Link to every section in the page -->
      <li><a href="#personal_summary">Personal Summary</a></li>
      <li><a href="#education">Education</a></li>
      <li><a href="#skillset">Skillset</a></li>
      <li><a href="#working_experience">Working Experience</a></li>
      <li><a href="#voluntary_experience">Voluntary Experience</a></li>
      <li><a href="#hobbies_interests">Hobbies and Interests</a></li>
      <li><a href="#referees">Referees</a></li>
    </ul>
  </section>
  <section id="personal_summary">
    <h2>Personal Summary</h2>
    <p>
      describing myself what I studied experience job, volunteering Career goal -> What I want to achieve for the company using my skills and experience
    </p>
  </section>
  <section id=“education”>
    <h2>Education</h2>
    <ul>
      <li>date (start mmm/yy - completed mmm/yy) school</li>
      <li>major</li>
      <li>Achievement — what I did well in the study —
        <ul>
          <li>computer programming with the result A+
            <ul>
              <li> languages and field, courses</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </section>
  <section id=“skillset”>
    <h2>Skillset</h2>
    <ul>
      <li>Hard skills— languages, maths, software, SublimeText3, Wing, Geany, Spyder</li>
      <li>Soft skills, English, Japanese, fundamental level Chinese(mandarin), team-orientated, time management,</li>
    </ul>
  </section>
  <section id=“working_experience”>
    <h2>Working Experience</h2>
    <ul>
      <li>date (start mmm/yy - completed mmm/yy) company </li>
      <li>role, position</li>
      <li>Achievement — what I did well in the job —
        <ul>
          <li>example1
            <ul>
              <li> detail about example1 may not be required</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </section>
  <section id=“voluntary_experiene”>
    <h2>Voluntary Experience</h2>
    <ul>
      <li>date (start mmm/yy - completed mmm/yy) company or organisation (church)</li>
      <li>role, position</li>
      <li>Achievement — what I did well in the job —
        <ul>
          <li>example1
            <ul>
              <li> detail about example1 may not be required</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </section>
  <section id=“hobbies_interests”>
    <h2>Hobbies and Interests</h2>
    <ul>
      <li>Cooking</li>
      <li>Minerals and Lapidary</li>
    </ul>
  </section>
  <section id="referees">
    <h2>Referees</h2>
    <ul>
      <li>name of the referee, position, company, contact detail (email or phone number)</li>
      <li>referee 2</li>
      <li>referee 3</li>
    </ul>
  </section>
</body>

</html>

Ответы [ 3 ]

1 голос
/ 12 июля 2020

Кавычки, которые вы использовали для id, неверны.

Используйте 

<section id="education">

вместо 

<section id=“education”>

То же самое для всех других нерабочих разделов

1 голос
/ 12 июля 2020

Внимательно посмотрите на свой ". 

<section id=“education”>
<section id="education">

Первый не работает, второй работает. Вы используете 'двойные кавычки справа' (") а не "обычные кавычки" (") в других разделах. Первый раздел personal_summary в порядке.

0 голосов
/ 12 июля 2020

Вы допустили небольшую ошибку в типе кавычек, которые вы использовали. Первая и последняя подходят, и вы использовали «..», но в остальных случаях вы допустили ошибку, используя «...» . Например, для образования у вас было это:
section id=“education”
Вместо:
section id="education"
Вы также назвали идентификатор как id=“voluntary_experiene” и вызвали его, используя: href="#voluntary_experience" в котором есть небольшая орфографическая ошибка. В приведенном ниже коде есть все фиксированные / рабочие теги привязки. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Jade Ichinose Resume</title>
</head>
<body>
    <h1>Jade</h1>
    <span id="email">Email:</span>
    <span id="phone">Mobile:</span>
    <a href="linkedinlink">My LinkedIn Profile</a>

    <section>
    <h3>Overview</h3>
    <ul>
      <!-- Link to every section in the page -->
      <li><a href="#personal_summary">Personal Summary</a></li>
      <li><a href="#education">Education</a></li>
      <li><a href="#skillset">Skillset</a></li>
      <li><a href="#working_experience">Working Experience</a></li>
      <li><a href="#voluntary_experience">Voluntary Experience</a></li>
      <li><a href="#hobbies_interests">Hobbies and Interests</a></li>
      <li><a href="#referees">Referees</a></li>
    </ul>
    </section>

    <section id="personal_summary">
    <h2>Personal Summary</h2>
    <p>
    describing myself
    what I studied
    experience job, volunteering 
    Career goal -> What I want to achieve for the company using my skills and experience

    </p>
    </section>


    <section id="education">
    <h2>Education</h2>
    <ul>
        <li>date (start mmm/yy - completed mmm/yy) school</li>
        <li>major</li>
        <li>Achievement — what I did well in the study — 
            <ul>
                <li>computer programming with the result A+
                    <ul>
                        <li> languages and field, courses</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    </section>


    <section id="skillset">
    <h2>Skillset</h2>
    <ul>
        <li>Hard skills— languages, maths, software, SublimeText3, Wing, Geany, Spyder</li>
        <li>Soft skills, English, Japanese,  fundamental level Chinese(mandarin), team-orientated, time management,</li>
    </ul>
    </section>

    <section id="working_experience">
    <h2>Working Experience</h2>
    <ul>
        <li>date (start mmm/yy - completed mmm/yy) company </li>
        <li>role, position</li>
        <li>Achievement — what I did well in the job — 
        <ul>
        <li>example1
            <ul>
                <li> detail about example1 may not be required</li>
            </ul>
        </li>
        </ul>
        </li>
    </ul>
    </section>


    <section id="voluntary_experience">
    <h2>Voluntary Experience</h2>
    <ul>
        <li>date (start mmm/yy - completed mmm/yy) company or organisation (church)</li>
        <li>role, position</li>
        <li>Achievement — what I did well in the job — 
        <ul>
        <li>example1
            <ul>
                <li> detail about example1 may not be required</li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
    </section>


    <section id="hobbies_interests">
    <h2>Hobbies and Interests</h2>
    <ul>
        <li>Cooking</li>
        <li>Minerals and Lapidary</li>
    </ul>
    </section>

    <section id="referees">
    <h2>Referees</h2>
    <ul>
        <li>name of the referee, position, company, contact detail (email or phone number)</li> 
        <li>referee 2</li>
        <li>referee 3</li>
    </ul>
    </section>



</body>
</html>
...