Bootstrap 4粘贴顶部更改导航栏颜色

时间：2018-05-03 08:09:00

标签： javascript jquery html css bootstrap-4

为了获得粘性导航栏，我使用了Bootstrap 4类sticky-top。我更喜欢css解决方案而不是一些JS，因为这在过去会产生一些错误。

我希望当用户到达时，我的导航栏会以透明的颜色显示。 （我的导航栏变得粘稠的那一刻 - 这是有效的）。在此之前它应该是随机颜色。 （这不起作用 - 灰色背景出现在粘性顶级的透明背景中。）

我还没有找到一个很好的解决方案。我试图通过JS添加一个新类，但这不起作用。

Codepen example 

/* Open tabs */
function openTab(evt, parameter) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(parameter).style.display = "block";
  evt.currentTarget.className += " active";
}
/* Open tabs END */
/* Smooth scroll */
//Only where the class smooth-scroll is, scrolling is enabled
$(document).ready(function () {
  $('a.smooth-scroll[href*="#"]:not([href="#three"])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      //Comment the following line if you don't want to see the anchor in the url
      //target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
/* Smooth scroll END */
/* Global */

* {
  margin: 0px;
  padding: 0px;
  font-family: Roboto,
}

.separator {
  height: 50px;
  background-color: black;
}

/* Global END */

/* Big Carousel */

.big-carousel .carousel-item {
  /* viewport height */
  height: 375px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.big-carousel .carousel-inner {
  height: 375px;
}

.big-carousel .carousel-caption {
  margin-bottom: 110px;
}

.big-carousel .carousel-caption a {
  border: none;
  background-color: rgba(255, 0, 77);
  color: white;
  padding: 20px;
  border-radius: 1px;
}

.big-carousel .carousel-caption a:hover {
  background: #EFFF00;
  text-decoration: none;
  color: black;
}

.big-carousel .carousel-indicators i {
  font-size: 40px;
  color: white;
  margin-bottom: 100px;
}

/* Big Carousel END */

/* Navigation */

.navbar {
  background-color: #020202;
  border-radius: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 1 !important;
}

.sticky-top {
  background-color: rgba(0, 0, 0, 0.8);
}

.navbar-brand {
  /*padding-left: 60px;*/
}

.navbar a {
  color: #b6b9c1 !important;
}

.nav-social {
  padding-right: 10px;
}

.nav-social i {
  color: white;
}

.navbar .hvr-underline-from-center::before {
  background: white;
  height: 2px;
}

.navbar-toggler {
  outline: none !important;
  box-shadow: none;
  border: none !important;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none;
}

.cta-nav {
  margin-top: 8px;
  margin-bottom: 5px;
  margin-left: 25px;
}

.cta-nav a {
  background-color: rgba(255, 0, 77);
  color: white !important;
  padding: 10px;
  border-radius: 1px;
}

.cta-nav a:hover {
  background: #EFFF00;
  text-decoration: none;
  color: black !important;
}

@media (min-width: 1px) and (max-width: 576px) {
  .navbar-brand {
    padding-left: 7.5px;
  }
  .nav-social {
    margin-left: 14px;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .navbar-brand {
    padding-left: 15px;
  }
  .nav-social {
    margin-left: 14px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .navbar-brand {
    padding-left: 25px;
  }
  .nav-social {
    padding-right: 20px;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .navbar-brand {
    padding-left: 50px;
  }
  .nav-social {
    padding-right: 30px;
  }
}

@media (min-width: 1201px) and (max-width: 9999px) {
  .navbar-brand {
    padding-left: 70px;
  }
  .nav-social {
    padding-right: 50px;
  }
}

/* Navigation END */

/* Tab content */

.tabcontent {
  display: none;
  color: black;
  padding-top: 40px;
  padding-bottom: 50px;
}

.tabcontent h1 {
  text-align: center;
  margin-bottom: 15px;
}

.tabcontent h2,
h3,
h4 {
  text-align: center;
}

.tabcontent a {
  text-decoration: none;
  color: #719DE3;
  padding-bottom: 2px;
}

.tabcontent p {
  color: #121212;
}

.tabcontent {
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Tab content END */

/* Start Section 1 */

.start-section {
  height: 100%;
  background: #DAD299;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #B0DAB9, #DAD299);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #B0DAB9, #DAD299);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-attachment: fixed;
}

/* XX1 */

/* XX1 END*/

/* XX2 */

/* XX2 */

/* XX3 */

/* XX3 END */

/* Start Section END */
<!DOCTYPE html>
<html>
<!-- Meta head -->

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/all-css.css">
  <!-- JQuery first -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="js/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<!-- Meta head END -->

<body id="top" onload="openTab(event, 't1');">
  <!-- Big Carousel -->
  <div class="big-carousel">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <!-- Slide One - Set the background image for this slide in the line below -->
        <div class="carousel-item active" style="background-image: url(images/MG_9185.jpg)">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
        <!-- Slide Two - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image:">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
        <!-- Slide Three - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image:">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
      </div>
      <!-- Arrow left -->
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
      <!-- Arrow right -->
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
  </div>
  <!-- Big Carousel END -->
    <!-- Navigation -->
  <div id="nav-anker"></div>
  <nav class="navbar navbar-dark navbar-expand-md sticky-top">
    <a href="/" class="navbar-brand"><img style="width: 45px;" src=""></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbar2">
      <ul class="navbar-nav mx-auto text-center">
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't1')"><span class="hvr-underline-from-center">Die Tour</span></a>
        </li>
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't2')"><span class="hvr-underline-from-center">Vorbereitung</span></a>
        </li>
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't3')"><span class="hvr-underline-from-center">Termine & Städte</span></a>
        </li>
        <li class="nav-item cta-nav d-none d-md-block hvr-pulse-grow">
          <a href="">Tickets</a>
        </li>
      </ul>
      <ul class="nav navbar-nav flex-row justify-content-center flex-nowrap nav-social">
        <li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-facebook"></i></a> </li>
        <li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-instagram"></i></a> </li>
        <li class="nav-item"><a class="nav-link text-whit" href="" target="_blank"><i class="fa fa-youtube"></i></a> </li>
      </ul>
    </div>
  </nav>
  <!-- Navigation -->

  <!-- Start Section -->
  <section class="start-section">
    <!-- XX1 -->
    <div id="t1" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Titel</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX1 END -->
    <!-- XX2 -->
    <div id="t2" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Was du wissen musst</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX2 END -->
    <!-- XX3 -->
    <div id="t3" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Wann</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX3 END -->
  </section>
  <!-- Start Section END -->
</body>
</html>

2 个答案:

答案 0 :(得分：1)

原因explained here position:sticky（Bootstrap sticky-top）并未提供何时“卡住”的说明。

因此，您需要使用JS来有条件地更改Navbar颜色/样式。 一种方法是使用 IntersectionObserver 。您可以在#nav-anker上使用此功能，这是 {/ 1}}导航栏之前的元素。

sticky-top

因此，当Navbar变得粘滞时，会向其添加(new IntersectionObserver(function(e,o){ if (e[0].intersectionRatio > 0){ document.documentElement.removeAttribute('class'); } else { document.documentElement.setAttribute('class','stuck'); }; })).observe(document.querySelector('#nav-anker')); 类。你可以让CSS样式在stuck ...

时发生变化 
stuck

演示：https://www.codeply.com/go/psiFbB6Ro6

答案 1 :(得分：0)

您可以简单地覆盖所有“nav”样式的颜色。 即使不建议使用“！important”，这也适用于此。

否则，您需要设置所有父母的样式，直到导航栏的祖先或将ID传递给导航栏。

编辑：通过检查元素到顶部的偏移量（如果它是粘性的，则为0），您可以将不透明度更改为您想要的任何值。 因此，如果顶部的偏移量为0，则降低不透明度，如果偏移量大于0，则只需将不透明度恢复为1. 

/* Open tabs */
function openTab(evt, parameter) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(parameter).style.display = "block";
  evt.currentTarget.className += " active";
}
/* Open tabs END */
/* Smooth scroll */
//Only where the class smooth-scroll is, scrolling is enabled
$(document).ready(function () {
  $('a.smooth-scroll[href*="#"]:not([href="#three"])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      //Comment the following line if you don't want to see the anchor in the url
      //target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });

    /* change opacity if nav is at top of the page */
    var distance = $('nav').offset().top,
    $window = $(window);

    $window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
      $('nav').fadeTo(0.5, 0.2);
    }else{
      $('nav').fadeTo(0.5, 1);
    }
  });

});
/* Smooth scroll END */
/* Global */

* {
  margin: 0px;
  padding: 0px;
  font-family: Roboto,
}

.separator {
  height: 50px;
  background-color: black;
}

/* Global END */

/* Navigation */
nav{
  background-color: red !important;

}

/* Big Carousel */

.big-carousel .carousel-item {
  /* viewport height */
  height: 375px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.big-carousel .carousel-inner {
  height: 375px;
}

.big-carousel .carousel-caption {
  margin-bottom: 110px;
}

.big-carousel .carousel-caption a {
  border: none;
  background-color: rgba(255, 0, 77);
  color: white;
  padding: 20px;
  border-radius: 1px;
}

.big-carousel .carousel-caption a:hover {
  background: #EFFF00;
  text-decoration: none;
  color: black;
}

.big-carousel .carousel-indicators i {
  font-size: 40px;
  color: white;
  margin-bottom: 100px;
}

/* Big Carousel END */

/* Navigation */

.navbar {
  background-color: #020202;
  border-radius: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 1 !important;
}

.sticky-top {
  background-color: rgba(0, 0, 0, 0.8);
}

.navbar-brand {
  /*padding-left: 60px;*/
}

.navbar a {
  color: #b6b9c1 !important;
}

.nav-social {
  padding-right: 10px;
}

.nav-social i {
  color: white;
}

.navbar .hvr-underline-from-center::before {
  background: white;
  height: 2px;
}

.navbar-toggler {
  outline: none !important;
  box-shadow: none;
  border: none !important;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none;
}

.cta-nav {
  margin-top: 8px;
  margin-bottom: 5px;
  margin-left: 25px;
}

.cta-nav a {
  background-color: rgba(255, 0, 77);
  color: white !important;
  padding: 10px;
  border-radius: 1px;
}

.cta-nav a:hover {
  background: #EFFF00;
  text-decoration: none;
  color: black !important;
}

@media (min-width: 1px) and (max-width: 576px) {
  .navbar-brand {
    padding-left: 7.5px;
  }
  .nav-social {
    margin-left: 14px;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .navbar-brand {
    padding-left: 15px;
  }
  .nav-social {
    margin-left: 14px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .navbar-brand {
    padding-left: 25px;
  }
  .nav-social {
    padding-right: 20px;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .navbar-brand {
    padding-left: 50px;
  }
  .nav-social {
    padding-right: 30px;
  }
}

@media (min-width: 1201px) and (max-width: 9999px) {
  .navbar-brand {
    padding-left: 70px;
  }
  .nav-social {
    padding-right: 50px;
  }
}

/* Navigation END */

/* Tab content */

.tabcontent {
  display: none;
  color: black;
  padding-top: 40px;
  padding-bottom: 50px;
}

.tabcontent h1 {
  text-align: center;
  margin-bottom: 15px;
}

.tabcontent h2,
h3,
h4 {
  text-align: center;
}

.tabcontent a {
  text-decoration: none;
  color: #719DE3;
  padding-bottom: 2px;
}

.tabcontent p {
  color: #121212;
}

.tabcontent {
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Tab content END */

/* Start Section 1 */

.start-section {
  height: 100%;
  background: #DAD299;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #B0DAB9, #DAD299);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #B0DAB9, #DAD299);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-attachment: fixed;
}

/* XX1 */

/* XX1 END*/

/* XX2 */

/* XX2 */

/* XX3 */

/* XX3 END */

/* Start Section END */
<!DOCTYPE html>
<html>
<!-- Meta head -->

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/all-css.css">
  <!-- JQuery first -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="js/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<!-- Meta head END -->

<body id="top" onload="openTab(event, 't1');">
  <!-- Big Carousel -->
  <div class="big-carousel">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <!-- Slide One - Set the background image for this slide in the line below -->
        <div class="carousel-item active" style="background-image: url(images/MG_9185.jpg)">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
        <!-- Slide Two - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image:">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
        <!-- Slide Three - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image:">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
      </div>
      <!-- Arrow left -->
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
      <!-- Arrow right -->
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
  </div>
  <!-- Big Carousel END -->
    <!-- Navigation -->
  <div id="nav-anker"></div>
  <nav class="navbar navbar-dark navbar-expand-md sticky-top">
    <a href="/" class="navbar-brand"><img style="width: 45px;" src=""></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbar2">
      <ul class="navbar-nav mx-auto text-center">
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't1')"><span class="hvr-underline-from-center">Die Tour</span></a>
        </li>
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't2')"><span class="hvr-underline-from-center">Vorbereitung</span></a>
        </li>
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't3')"><span class="hvr-underline-from-center">Termine & Städte</span></a>
        </li>
        <li class="nav-item cta-nav d-none d-md-block hvr-pulse-grow">
          <a href="">Tickets</a>
        </li>
      </ul>
      <ul class="nav navbar-nav flex-row justify-content-center flex-nowrap nav-social">
        <li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-facebook"></i></a> </li>
        <li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-instagram"></i></a> </li>
        <li class="nav-item"><a class="nav-link text-whit" href="" target="_blank"><i class="fa fa-youtube"></i></a> </li>
      </ul>
    </div>
  </nav>
  <!-- Navigation -->

  <!-- Start Section -->
  <section class="start-section">
    <!-- XX1 -->
    <div id="t1" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Titel</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX1 END -->
    <!-- XX2 -->
    <div id="t2" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Was du wissen musst</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX2 END -->
    <!-- XX3 -->
    <div id="t3" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Wann</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX3 END -->
  </section>
  <!-- Start Section END -->
</body>
</html>

相关问题
最新问题