HTML Точки привязки на одной странице не работают - PullRequest
0 голосов
/ 09 февраля 2020

Я относительно новичок в HTML, так что, может быть, было действительно вопиющее решение, которое я пропустил. Но я делаю веб-сайт с одной прокруткой (bootstrap) с очень простой c навигационной панелью, чтобы люди могли переходить в нужный раздел.

Панель навигации в настоящее время является ul с фоновым изображением, которое появляется справа при наведении курсора.

Я следовал различным урокам; создал точки привязки и теги id, но, кажется, ничего не происходит, когда я нажимаю на кнопки панели навигации. И я чувствую, что мне не хватает довольно очевидного решения здесь. Я изменил положение якорей и попробовал несколько вариантов как html, так и css, которые я нашел в Интернете, но ни один из них, похоже, не решил это для меня. Я пробовал это в других браузерах, так что это не проблема браузера.

Вот код navbar:

<div class="container-fluid menuholder">
    <div class="menu">
    <ul class="nobull menutext">
            <li><a href="#prologue menutext">Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></a></li>
            <li><a href="#chap1 menutext"><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></a></li>
            <li><a href="#chap2 menutext"><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></a></li>
            <li><a href="#epilogue menutext"><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></a></li>
    </ul>
    </div>
</div>

и вот соответствующая часть одного из разделов, который он должен для автоматической прокрутки к:

<div class = "container">
    <div class="row">
        <div class ="chap1title col-md-3" id="chap1">
            <h3>Chapter 1:</h3><br><h2>The Storyteller</h2>
        </div>
    </div>
</div>

Aaa, и вот несколько изображений меню и пример, где я бы хотел, чтобы кнопка главы 1 прокручивала до

Frontpage

Навбар

Где бы я хотел прокрутить до

Заранее большое спасибо!

1 Ответ

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

Похоже, ваша ссылка недействительна, вы добавляете menutext внутри href, который должен фактически взять ссылку или идентификатор элемента привязки

<ul class="nobull menutext">
            <li><a href="#prologue">Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></a></li>
            <li><a href="#chap1"><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></a></li>
            <li><a href="#chap2"><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></a></li>
            <li><a href="#epilogue"><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></a></li>
    </ul>

Похоже, текст меню - это класс имя, которое следует добавить в класс

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...