Раскрывающаяся ссылка навигационной панели начальной загрузки не работает, когда в коде находится файл bootstrap.min.js - PullRequest
Новая
       3

Раскрывающаяся ссылка навигационной панели начальной загрузки не работает, когда в коде находится файл bootstrap.min.js

0 голосов
/ 10 марта 2019

Я новичок в этом, поэтому, пожалуйста, потерпите меня. Я скопировал этот код навигационной панели из Bootstrap и настроил его под свой код.

У меня есть выпадающий список с тремя выпадающими пунктами. Я хочу, чтобы у пользователя было два варианта. Они могут перейти на страницу портфолио и найти там ссылки или воспользоваться раскрывающимся меню.

Ссылка на страницу портфолио не работает, если в коде находится последний скрипт, содержащий bootstrap.min.js. Не уверен, почему это не работает. Если я достану выпадающий список и сделаю его обычной ссылкой, он перейдет на страницу портфолио. Вот мой код: 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel ="stylesheet" type="text/css" href="style.css">
    <title>Do You Know Jennipher</title>

  </head>
  <nav class="navbar sticky-top navbar-expand-lg">
    <a class="navbar-brand" href="index.html">Do You Know Jennipher</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="aboutme.html">About Me</a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="previous_work.html">Portfolio</a>

          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="previous_work.html">Egyptian Petrdise</a>
            <a class="dropdown-item" href="previous_work.html">Movie Madness</a>
            <a class="dropdown-item" href="previous_work.html">George's Safari Adventure</a>
          </div>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="gallery.html">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="say_hello.html">Say Hello</a>
        </li>
      </ul>

    </div>
  </nav>
  <header>
    <div class="flex-container">
      <img src="images/banner_ad.jpg" class="banner" alt="banner ad"> 
    </div>
  </header> 
  <body>
    <section class="intro">
      <div class="container">

        <div class="row">
          <div class="col-6">
            <img src="images/mountains.jpg" alt="rocky mountains" class="mountain" width="500px">
          </div>
          <div class="col-6">
            <p class="intro-text">Hello, my name is Jennipher </p>
          </div>
        </div>
      </div>

    </section>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>

  </body>
  <footer>
    <p class="footer">&#169; Copyright 2019 Jennipher Samms</p>
  </footer>
</html>

1 Ответ

0 голосов
/ 10 марта 2019

В библиотеке min.js нет ничего плохого.Только вы должны следовать идеальной компоновке тела и синтаксису.Лучше всегда сохранять свои <script> файлы до окончания тега </body>.В конце вы забыли написать некоторые элементы внутри тела вместо того, чтобы писать их вне тега тела.Я только что поправил ваш код.Проверьте это один раз. 

<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel ="stylesheet" type="text/css" href="style.css">
<title>Do You Know Jennipher</title>

</head>
<body>
        <nav class="navbar sticky-top navbar-expand-lg">
            <a class="navbar-brand" href="index.html">Do You Know Jennipher</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="aboutme.html">About Me</a>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="previous_work.html">Portfolio</a>

                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="previous_work.html">Egyptian Petrdise</a>
                    <a class="dropdown-item" href="previous_work.html">Movie Madness</a>
                    <a class="dropdown-item" href="previous_work.html">George's Safari Adventure</a>
                </div>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="gallery.html">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="say_hello.html">Say Hello</a>
                </li>
            </ul>

        </div>
        </nav>
    <header>
        <div class="flex-container">
            <img src="images/banner_ad.jpg" class="banner" alt="banner ad"> 
        </div>
    </header> 

<section class="intro">
        <div class="container">
        <div class="row">
            <div class="col-md-6">
                <img src="images/mountains.jpg" alt="rocky mountains" class="mountain" width="500px">
            </div>
            <div class="col-md-6">
                <p class="intro-text">Hello, my name is Jennipher </p>
            </div>
        </div>
        </div>

</section>
<footer>
    <p class="footer text-center">&#169; Copyright 2019 Jennipher Samms</p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Для лучшей практики перейдите по этой ссылке

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

Нет похожих вопросов

...