Javascript css引导滑块菜单修复

所以我在这个引导旋转木马中工作，现在我有了这个代码，但我需要解决一些问题

1） 使菜单响应。 2） 使选定的按钮比其他按钮高

我尝试了很多东西，但我还没有找到解决办法，所以我来到这里，也许有人可以帮助我，非常感谢

这是作为示例的图像

代码在代码段中

$（文档）.ready（功能（ev）{
$（“#自定义旋转木马”）。on（'slide.bs.carousel'，函数（evt）{
$（'#custom_carousel.controls li.active'）.removeClass（'active'）；
$（'#自定义旋转木马.controls li:eq（'+$（evt.relatedTarget.index（）+'））.addClass（'active'）；
})
});
.carousel-inner>.item>img，
.carousel-inner>.item>a>img{
宽度：100%；
/*保证金：自动*/
/*边框：2倍纯绿*/
}
卡鲁塞尔先生{
宽度：100%；
高度：40px；
/*保证金：自动*/
边框：3倍纯红；
浮动：对；
保证金：0px 0px 00px 0px；
/*背景色：黑色*/
}
.幻灯片{
/*边框：2个实心#093845*/
宽度：自动；
}
/*导航滑块*/
美国海军航空公司{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
边框：1px实心#e7e7e7；
背景色：#F3；
边框：1px纯红；
高度：50px；
}
李国维先生{
浮动：左；
边框：1px纯红；
宽度：210px；
}
李娜先生{
显示：块；
颜色：#666；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.navi li a:悬停：未（.active）{
背景色：#ddd；
}
李国维先生{
颜色：白色；
背景色：#4CAF50；
}


标签滑动旋转木马（灵感来源于sevenx.de）-Bootsnipp.com









将“.navi ul”类中的“高度”更改为“自动”，以便

.navi ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
  border: 1px solid red;
  height: auto;         
}

.navi li {
  float: left;
  border: 1px solid red;
  width: 20%;
}

将“.navi li”类中的按钮宽度更改为20%，使其

.navi ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
  border: 1px solid red;
  height: auto;         
}

.navi li {
  float: left;
  border: 1px solid red;
  width: 20%;
}

并为所选按钮再添加一个类

.navi li.active a {
  background-color: white;
  border: 1px solid green;
  height: 11%;
  margin: -15px 0 0 -2px;
  position: absolute;
  width: 19%;
}

首先要注意的是，您提到的JavaScript不能按照您的标记工作。具体来说，幻灯片移动时，活动类不会动态更改。我已经修改了JS代码，使其正常工作

$(document).ready(function(ev){
    $('#myCarousel').on('slide.bs.carousel', function (evt) {
      $('.navi li.active').removeClass('active');
      $('.navi li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
    })
});

你的CSS上也有一个小错误。
active
类应用于
标记，而不是
，因此活动代码应更改为

  .navi li.active {
      background: blue;
      color: white;
  }

而不是
。navi li a.active

要在激活时缩放按钮，可以使用
transform:scale（）
。像这样

  .navi li.active {
      background: blue;
      color: white;
      -ms-transform: scale(1.1); /* IE 9 */
      -webkit-transform: scale(1.1); /* Safari */
      transform: scale(1.1);
  }

好吧，我知道这可能比你要求的要多一些，但我想我会帮你，让这对你完全有反应。我在旋转木马上留下了标题和标题，以备将来使用，如果不想，你可以把它们拿出来。因此，我喜欢对引导旋转木马做的是，给旋转木马项目一个百分比的填充底部，然后处理这个百分比，直到你得到你想要的高度。然后我想给每个项目一个你想放在旋转木马中的图像的背景图像，因为不是所有的图像都有相同的纵横比，否则你会遇到图像倾斜的问题。如果你不想使用背景图像的方法，你可以使用你的方法，但我想我会把它放在那里，因为它最适用于响应性设计。所以我给每个旋转木马项目一个类，比如第一个项目，第二个项目，第三个项目等等，然后给所有的幻灯片图片的背景图片。然后我们会把你的导航放在旋转木马下面，然后把你的导航都设置好。此外，您还需要将
data interval=“false”
添加到您的#myCarousel div中，因为当您单击其中一张幻灯片时，它将开始循环播放幻灯片，而您的活动选项卡仍将位于您单击的幻灯片上。当转盘处于自动间隔时删除活动类是一组完全不同的jquery标记。此外，我已将您的转盘导航按钮设置为20%，因为其中有5个。如果您希望它们是不同的百分比，则添加一个媒体查询，使它们的大小更大，例如，您还必须更改转盘导航高度，并且可能不需要将活动按钮apear变大：

@media screen and (max-width: 767px){
  .carousel-nav li{width: 100%;)
}

这里是一个工作小提琴演示

下面是标记：

Html:

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
  <div class="carousel-inner" role="listbox">
    <div class="item active first-item">
      <div class="container">
        <div class="carousel-caption">
          <p class="carousel-heading">Example Heading 1</p>
          <p class="carousel-description">Example of a Carousel Description</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
        </div>
      </div>
    </div>
    <div class="item second-item">
      <div class="container">
        <div class="carousel-caption">
          <p class="carousel-heading">Example Heading 2</p>
          <p class="carousel-description">Example of a Carousel Description</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
        </div>
      </div>
    </div>
    <div class="item third-item">
      <div class="container">
        <div class="carousel-caption">
          <p class="carousel-heading">Example Heading 3</p>
          <p class="carousel-description">Example of a Carousel Description</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
        </div>
      </div>
    </div>
    <div class="item fourth-item">
      <div class="container">
        <div class="carousel-caption">
          <p class="carousel-heading">Example Heading 4</p>
          <p class="carousel-description">Example of a Carousel Description</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
        </div>
      </div>
    </div>
    <div class="item fifth-item">
      <div class="container">
        <div class="carousel-caption">
          <p class="carousel-heading">Example Heading 5</p>
          <p class="carousel-description">Example of a Carousel Description</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
        </div>
      </div>
    </div>
  </div>
</div><!-- /.carousel -->


<ul class="carousel-nav">
  <li class="active" data-target="#myCarousel" data-slide-to="0"><button>Button 1</button></li>
  <li data-target="#myCarousel" data-slide-to="1"><button>Button 2</button></li>
  <li data-target="#myCarousel" data-slide-to="2"><button>Button 3</button></li>
  <li data-target="#myCarousel" data-slide-to="3"><button>Button 4</button></li>
  <li data-target="#myCarousel" data-slide-to="4"><button>Button 5</button></li>
</ul>

以及您的jquery：

注意：这可能需要您使用较新版本的jquery，因此您可能希望将其添加到head中，而不是1.11

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

哇！这是难以置信的，我知道我的知识是非常有限的，我甚至不能想到你解决这个问题的方法。。。简单难以置信！，非常感谢您花时间解决并解释您是如何解决我遇到的这个问题的，再次感谢您，我真的很高兴，我将检查您编写的每一行代码，并尝试理解！！如果您有任何问题，请随时评论我，我会尽快回复您