javascript - 点击图片后面包屑向左移动

标签 javascript jquery html css breadcrumbs

我在顶部有 3 个面包屑箭头。当我在第一张幻灯片中单击轮播主体中的三个(石膏板、混凝土、加气混凝土和砖)的图像时，其中一个箭头指向最左边。我希望它留在中间或在右边。

anchor 导航

.breadcrumb>li+li:before {
  padding: 0;
}

.breadcrumb li {
  float: left;
}

.breadcrumb li.active a {
  background: #5fdba7;
  /*#5fdba7  -- front part of arrow of active RED*/
  margin-left: 655px;
}

.breadcrumb li.completed a {
  background: brown;
  /* fallback color */
  background: #ffc107;
}

.breadcrumb li.active a:after {
  border-left: 30px solid #5fdba7;
  padding-left: 65px;
}

.breadcrumb li.completed a:after {
  border-left: 30px solid #ffc107;
}

.breadcrumb li a {
  color: white;
  text-decoration: none;
  padding: 10px 10px 10px 45px;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb li a:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid hsla(0, 0%, 83%, 1);
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}

.breadcrumb li a:before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 1px;
  left: 100%;
  z-index: 1;
}

.breadcrumb li:first-child a {
  color: white;
}

.breadcrumb li a:hover {
  background: #ffc107;
}

.breadcrumb li a:hover:after {
  border-left-color: #ffc107 !important;
}

.selector-for-some-widget {
  box-sizing: content-box;
}

.carousel-inner img {
  width: 100%;
  height: 100%;
  margin-top: -13px;
}

.buttonContainer {
  margin-top: 130px;
  margin-left: -180px;
}

* {
  outline-style: none;
}

#heroText {
  font-family: Impact;
  letter-spacing: 0.5px;
  text-decoration: underline;
}
<html lang="en">
<head>
  <title>Anchor Navigation</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="CarouselCSS.css">
  <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">
  <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>
</head>
<body>
  <div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- INITIALIZE OF SLIDES -->
    <!-- The slideshow -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="carousel-caption d-none d-md-block">
          <h1 id="heroText" style="color: #3775B7">DIY - GADR Brands</h1>
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
        <!-- SLIDE 0-->
        <!-- BREADCUMB nav bar -->
        <ul class="breadcrumb">
          <li class="active"><a href="#">MATERIAL</a></li>
          <li class="completed"><a href="#">WEIGHT</a></li>
          <li class="completed"><a href="#">PRODUCT</a></li>
        </ul>
        <!-- END BREADCUMB nav bar -->
        <img id="first" src="imgs/DIYWORKER.jpg" alt="DIYworker" width="100%" height="100%">
        <div class="carousel-caption d-none d-md-block">
          <div class="row" style="background-color:green; width:100% height:100%;">
            <!-- PLASTER BOARD CLICK BUTTON AND GET NEXT SLIDE-->
            <a class="carousel-control-next" href="#demo" data-slide-to="1"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/plasterBoardPic.png"></a>
            <!-- BRICK CLICK BUTTON AND GET NEXT SLIDE-->
            <div class="column" style="width:100%; height:100%;">
              <a class="carousel-control-next" href="#demo" data-slide-to="7"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/brickIMG.png"></a>
            </div>
            <!-- CONCRETE BUTTON AND GET NEXT SLIDE-->
            <div class="column" style=" width:100%; height:100%;">
              <a class="carousel-control-next" href="#demo" data-slide-to="11"><input class="buttonContainer" style="margin-right: 600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/concreteSTONEimg.png"></a>
            </div>
            <!-- AERATE CONCRETE CLICK BUTTON AND GET NEXT SLIDE-->
            <div class="column" style="width:100%; height:100%;">
              <a id="pulseAE" class="carousel-control-next" href="#demo" data-slide-to="13"><input class="buttonContainer" style="margin-right: 100px; margin-bottom: 900px;width: 225px; height: 225px;" type="image" src="imgs/Material_Images/aeratedConcreteIMG.png"></a>
            </div>
          </div>
          <!-- END OF MATERIAL ROW -->
        </div>
      </div>
      <!-- KILOS OF PLASTER BOARD SECOND SLIDE  -->
      <div class="carousel-item ">
        <!-- SLIDE 1-->
        <!-- BREADCUMB nav bar -->
        <ul class="breadcrumb">
          <li class="completed"><a href="#">MATERIAL</a></li>
          <li class="active"><a href="#">WEIGHT</a></li>
          <li class="completed"><a href="#">PRODUCT</a></li>
        </ul>
        <!-- END BREADCUMB nav bar -->
        <img src="imgs/DIYYoungWorker.jpg" alt="youngWorker" width="100%" height="100%">
        <div class="carousel-caption d-none d-md-block">
          <div class="row" style="background-color:green; width:100% height:100%;">
            <!-- CLICK BUTTON AND GET NEXT SLIDE-->
            <a class="carousel-control-next" href="#demo" data-slide-to="2"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/10kilos.png"></a>
            <div class="column" style="width:100%; height:100%;">
              <a class="carousel-control-next" href="#demo" data-slide-to="3"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/25kg.png"></a>
            </div>
            <div class="column" style=" width:100%; height:100%;">
              <a class="carousel-control-next" href="#demo" data-slide-to="4"><input class="buttonContainer" style="margin-right: 600px; margin-bottom:900px;  width: 225px; height: 225px;" type="image" src="imgs/KiloImages/100kg.png"></a>
            </div>
            <div class="column" style="width:100%; height:100%;">
              <a class="carousel-control-next" href="#demo" data-slide-to="5"><input class="buttonContainer" style="margin-right: 50px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/150kg.png"></a>
            </div>
          </div>
        </div>
      </div>
      <!-- END KILOS OF PLASTER BOARD SECOND SLIDE  -->
      <!-- SECOND SLIDE ANCHOR PLASTER BOARD  -->
      <div class="carousel-item ">
        <!-- SLIDE 2-->
        <!-- BREADCUMB nav bar -->
        <ul class="breadcrumb">
          <li class="completed"><a href="#">MATERIAL</a></li>
          <li class="completed"><a href="#">WEIGHT</a></li>
          <li class="active"><a href="#">PRODUCT</a></li>
        </ul>
        <!-- END BREADCUMB nav bar -->
        <img src="imgs/hammerGUY.jpg" alt="youngWorker" width="100%" height="100%">
        <div class="carousel-caption d-none d-md-block">
          <div class="row" style="background-color:green; width:100% height:100%;">
            <!-- ADD near href -data-slide-to="slideNumber"- if you want to play animation-->
            <a class="carousel-control-next" href="#demo"><input class="buttonContainer" style="margin-right: 800px;margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/AnchorsPerKilo/PlasterboardKilos/PictureHook10.png"></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

我希望箭头按顺序向右移动。

例如 Start > Process > End(这将根据用户的状态逐一进行。

最佳答案

看看，这就是我从问题中理解的。您可以将 CSS 与您的进行比较以采用更改。

.breadcrumb>li+li:before {
  padding: 0;
}

.breadcrumb {
  margin: auto;
  width: 440px;
}

.breadcrumb li {
  float: left;
}


.carousel-inner{
    background-color: #e9ecef;
}
.breadcrumb li.active a {
  background: #5fdba7;
  /*#5fdba7  -- front part of arrow of active RED*/
  /*margin-left: 655px;*/
}

.breadcrumb li.completed a {
  background: brown;
  /* fallback color */
  background: #ffc107;
}

.breadcrumb li.active a:after {
  border-right: 34px solid #5fdba7;
  /*padding-left: 65px;*/
}

.breadcrumb li.completed a:after {
  border-right: 34px solid #ffc107;
}

.breadcrumb li a {
  color: white;
  text-decoration: none;
  padding: 10px 35px 10px 30px;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb li a:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: -19px;
  z-index: 2;
}

.breadcrumb li a:before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-right: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 1px;
  left: -20px;
  z-index: 1;
}

.breadcrumb li:first-child a {
  color: white;
}

.breadcrumb li a:hover {
  background: #ffc107;
}

.breadcrumb li a:hover:after {
  border-left-color: #ffc107 !important;
}

.selector-for-some-widget {
  box-sizing: content-box;
}

.carousel-inner img {
  width: 100%;
  height: 100%;
  margin-top: -13px;
}

.buttonContainer {
  margin-top: 130px;
  margin-left: -180px;
}

* {
  outline-style: none;
}

#heroText {
  font-family: Impact;
  letter-spacing: 0.5px;
  text-decoration: underline;
}
<html lang="en">
<head>
  <title>Anchor Navigation</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="CarouselCSS.css">
  <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">
  <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>
</head>
<body>
  <div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- INITIALIZE OF SLIDES -->
    <!-- The slideshow -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="carousel-caption d-none d-md-block">
          <h1 id="heroText" style="color: #3775B7">DIY - GADR Brands</h1>
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
        <!-- SLIDE 0-->
        <!-- BREADCUMB nav bar -->
        <ul class="breadcrumb">
          <li class="active"><a href="#">MATERIAL</a></li>
          <li class="completed"><a href="#">WEIGHT</a></li>
          <li class="completed"><a href="#">PRODUCT</a></li>
        </ul>
        <!-- END BREADCUMB nav bar -->
        <img id="first" src="imgs/DIYWORKER.jpg" alt="DIYworker" width="100%" height="100%">
        <div class="carousel-caption d-none d-md-block">
          <div class="row" style="background-color:green; width:100% height:100%;">
            <!-- PLASTER BOARD CLICK BUTTON AND GET NEXT SLIDE-->
            <a class="carousel-control-next" href="#demo" data-slide-to="1"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/plasterBoardPic.png"></a>
            <!-- BRICK CLICK BUTTON AND GET NEXT SLIDE-->
            <div class="column" style="width:100%; height:100%;">
              <a class="carousel-control-next" href="#demo" data-slide-to="7"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/brickIMG.png"></a>
            </div>
            <!-- CONCRETE BUTTON AND GET NEXT SLIDE-->
            <div class="column" style=" width:100%; height:100%;">
              <a class="carousel-control-next" href="#demo" data-slide-to="11"><input class="buttonContainer" style="margin-right: 600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/concreteSTONEimg.png"></a>
            </div>
            <!-- AERATE CONCRETE CLICK BUTTON AND GET NEXT SLIDE-->
            <div class="column" style="width:100%; height:100%;">
              <a id="pulseAE" class="carousel-control-next" href="#demo" data-slide-to="13"><input class="buttonContainer" style="margin-right: 100px; margin-bottom: 900px;width: 225px; height: 225px;" type="image" src="imgs/Material_Images/aeratedConcreteIMG.png"></a>
            </div>
          </div>
          <!-- END OF MATERIAL ROW -->
        </div>
      </div>
      <!-- KILOS OF PLASTER BOARD SECOND SLIDE  -->
      <div class="carousel-item ">
        <!-- SLIDE 1-->
        <!-- BREADCUMB nav bar -->
        <ul class="breadcrumb">
          <li class="completed"><a href="#">MATERIAL</a></li>
          <li class="active"><a href="#">WEIGHT</a></li>
          <li class="completed"><a href="#">PRODUCT</a></li>
        </ul>
        <!-- END BREADCUMB nav bar -->
        <img src="imgs/DIYYoungWorker.jpg" alt="youngWorker" width="100%" height="100%">
        <div class="carousel-caption d-none d-md-block">
          <div class="row" style="background-color:green; width:100% height:100%;">
            <!-- CLICK BUTTON AND GET NEXT SLIDE-->
            <a class="carousel-control-next" href="#demo" data-slide-to="2"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/10kilos.png"></a>
            <div class="column" style="width:100%; height:100%;">
              <a class="carousel-control-next" href="#demo" data-slide-to="3"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/25kg.png"></a>
            </div>
            <div class="column" style=" width:100%; height:100%;">
              <a class="carousel-control-next" href="#demo" data-slide-to="4"><input class="buttonContainer" style="margin-right: 600px; margin-bottom:900px;  width: 225px; height: 225px;" type="image" src="imgs/KiloImages/100kg.png"></a>
            </div>
            <div class="column" style="width:100%; height:100%;">
              <a class="carousel-control-next" href="#demo" data-slide-to="5"><input class="buttonContainer" style="margin-right: 50px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/150kg.png"></a>
            </div>
          </div>
        </div>
      </div>
      <!-- END KILOS OF PLASTER BOARD SECOND SLIDE  -->
      <!-- SECOND SLIDE ANCHOR PLASTER BOARD  -->
      <div class="carousel-item ">
        <!-- SLIDE 2-->
        <!-- BREADCUMB nav bar -->
        <ul class="breadcrumb">
          <li class="completed"><a href="#">MATERIAL</a></li>
          <li class="completed"><a href="#">WEIGHT</a></li>
          <li class="active"><a href="#">PRODUCT</a></li>
        </ul>
        <!-- END BREADCUMB nav bar -->
        <img src="imgs/hammerGUY.jpg" alt="youngWorker" width="100%" height="100%">
        <div class="carousel-caption d-none d-md-block">
          <div class="row" style="background-color:green; width:100% height:100%;">
            <!-- ADD near href -data-slide-to="slideNumber"- if you want to play animation-->
            <a class="carousel-control-next" href="#demo"><input class="buttonContainer" style="margin-right: 800px;margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/AnchorsPerKilo/PlasterboardKilos/PictureHook10.png"></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

关于javascript - 点击图片后面包屑向左移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55864902/

上一篇：HTML:如何在标题中定位元素？

下一篇：css - Fullcalendar 的 fc-highlight 不适用于自定义日历中的日期更改

相关文章：

javascript - 为什么我的 src 切换使用 jquery 和左/右 keyup 事件随机中断？

PHP/Javascript 表单生成器/模式定义器

javascript - Jquery按钮点击获取所选选项值

javascript - 返回 false 不会阻止表单提交

javascript - jQuery 用户界面 : How can I have more than one "selectable" element if the element has to have id ="selectable"?

javascript - 为什么路由存在会被视为没有路由匹配(RoutingError)？

javascript - 空白 : nowrap for photo has issue when resize

html - Circle Loader 将达到 100%

javascript - 屏幕阅读器会关注 CSS 吗？

javascript - 如何使用 import() 在代码拆分中导入一个类？

©2024 IT工具网  联系我们