单击图像后,面包屑在左侧移动

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


锚导航


.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;

}

我希望箭头向右并按顺序排列。

例如,“开始”>“处理”>“结束”(根据用户的状态,此选项将一一显示在最右边。


函数式编程
浏览 123回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript