Question

我试图在我的网页上添加一个下拉菜单和一个轮播。到目前为止他们已被添加，这意味着菜单的图标在那里，旋转木马的第一张图片在页面上，但是当我点击下拉菜单时......没有任何反应！与旋转木马相同。有谁可以帮忙。以下是轮播的代码：

 <!DOCTYPEhtml>
<head>
  <meta charset="utf-8">
  <meta name="viewport"
  content="width-device-width, intial-scale=1">

    <title>Daniel Vaughan</title>
<!--Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Abel|Archivo+Narrow|Barlow|Cabin|Courgette|Dancing+Script|Kanit|Questrial" rel="stylesheet">
<!-- bootstrap.3 css -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.1.1.js" type="text/javascript" charset="utf-8" async defer>
  </script>

<style>

Body{
  background-image:url(images/Omen-Background.jpg);
    background-position: center;
  color: red;
  font-family: 'Barlow','arial', 'Cabin';
  font-weight: bold;
  font-size: 18px;
}

.navbar{
  background-image: inherit;
  color:inherit;
}

    #aboutme{
        margin: 50px 40px 40px 50px;
        padding: 50px 25px 25px 50px;
        background-image: inherit;
        color: grey;
        text-shadow: 1px 1px 2px red;
        font-family: 'Barlow';
        font-size: 18px;
    }

    p{
        background: rgba("204, 204, 204, 0.5";
        color: grey;
        text-shadow: 1px 1px 2px red;
    }

</style>
</head>

<body>
  <div class="container-fluid">

    <div class="row">
      <div class="col-md-6 text-left">
    <img class="title-logo" src="images/omen-digital.jpg" height="70px" width="100x" alt="Omen logo">

      </div>
      <div class="col-md-6 text-right text-uppercase">
          <h1 class="text-super">Daniel Vaughan</h1>
          <h4>Freelance Developer</h4>

        </div>
        </div>
<header>
      <div class="container">
<div class="dropdown">
 <button class="btn dropdown-toggle" data-toggle="dropdown">
   <span class="caret"></span></button>
     <ul class="dropdown-menu">
       <a href="danvaughan.html"><li>Home</li></a>
       <a href="projects.html"><li>Projects</li></a>
       <a href="employment.html"><li>Employment History</li></a>
       <a href="hobbies.html"><li>Hobbies</li></a>
      </ul>
      </div>
</div>

</header>
<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators black">
      <li data-target="#myCarousel" data-slide-to ="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to ="1"></li>
      <li data-target="#myCarousel" data-sldie-to ="2"></li>
      <li data-targert="#myCarousel" data-slide-to ="3"></li>
    </ol>

<div class="carousel-inner">
    <div class="item active">
      <img src="images/family.jpg"  style="width:100%">
    <div class="carousel-caption">
      <h3>First family holiday</h3>
    </div>
</div>

<div class="item">
    <img class="image-responsive" src="images/thebar.jpg" style="width:100%">
  <div class="carousel-caption">
    <h3>My Favourite Hobbie</h3>
  </div>
</div>

<div class="item">
    <img class="image-responsive" src="images/light-bringer.jpg" style="width=100%">
  <div class="carousel-caption">
    <h3>Some of my favourite books</h3>
  </div>
</div>

<div class="item">
  <img class="image-responsive" src="images/omen-digital.jpg" style="width:100%">
    <div class="carousel-caption">
      <h3>Gaming (my second favourite hobbie)</h3>
      </div>
</div>

  <a class="left carousel-control"href="#myCarousel"data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span>
  </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
    </a>

</div>

    <div class="container-fluid">
    <div class="row">

        <div class="col-6 text-left" id="aboutme">
        <h1> A Little About Me</h1>
            <p class="text-left">Hello<br/> My name is Daniel Vaughan (Dan). Welcome to my website.</p>

            <p class="text-left">I am a freelance web developer based in Birmingham UK. I have gained experience in the field of web development through the good people  at Freecode camp, where I learned how to code. I love coding.<br/> It gives me great satisfaction when I make websites that are responsive and beautiful.At the moment I am in the market for part-time work as I am still employed as a machine operator.</p>
        </div>
        </div>
    </div>

    <script>

        $("document").ready(function(){
            $("#item").click(function(){
                $("#submenu").slideToggle(500);
            });

        });


    </script>

    </body>

Answer 1

你添加了吗？在源https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js和https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js ??

Answer 2

看起来你没有包含bootstrap的javascript文件，它也是库的一部分。我建议您在代码中包含来自此CDN的相应链接，以查看是否有助于解决您的问题：

https://www.bootstrapcdn.com/

对于bootstrap 4：
- https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js

在页脚上复制：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

对于bootstrap 3.3.7：
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
在页脚上复制：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 3

因此。感谢您的代码，我做了一些更改，它对我来说很好。你错过了一些＆＃34;空格键＆＃34; ＆＃34 ;;＆＃34;我改变你的源代码链接。只需编辑我的代码即可更改图片，并度过一个美好的夜晚：D

Editor(self.myArg)

bootstrap 3下拉菜单和轮播

3 个答案: