如何在导航栏上制作引导程序传送带指示器

我的传送带工作正常，彼此之间完美滑动，但我需要将该项目高亮为活动类，然后滑动并单击导航栏li a。任何人都可以帮助我在正确的方向吗？如何在导航栏上制作引导程序传送带指示器

HTML代码：

<nav class="navbar navbar-default" role="navigation"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 

      <div class="collapse navbar-collapse navbar-ex1-collapse"> 
       <ul class="nav navbar-nav"> 
        <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">slide 1</a></li> 
        <li data-target="#myCarousel" data-slide-to="1"><a href="#">slide 2</a></li> 
        <li data-target="#myCarousel" data-slide-to="2"><a href="#">slide 3</a></li> 
       </ul> 
      </div> 
     </nav>  

<div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
      <div class="wrapper"> 
       <%-- Slide 1 --%> 
      </div> 
      </div> 
      <div class="item"> 
      <div class="wrapper"> 
       <%-- Slide 2 --%> 
      </div> 
      </div> 
      div class="item"> 
      <div class="wrapper"> 
       <%-- Slide 3 --%> 
      </div> 
      </div> 
     </div> 

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

来源

2014-12-04 Daniel Leth

添加一些jQuery的/ JS会在点击添加和删除活动类

$('.nav li').on('click', function(){ 
    $('li.active').removeClass('active'); 
    $(this).addClass('active'); 
});

更新：http://www.bootply.com/nxah8CQozF没有时间的ATM解决这个问题了，它有像第一张幻灯片那样的一些错误不会再次变得活跃，但希望你能弄明白，或者它至少给你一个起点。

$(document).ready(function() { 
    $(".carousel").carousel({ 
    interval: 5000 
    }); 
    $('#myCarousel').on('slide.bs.carousel', function() { 
    var to_slide; 
    to_slide = $(".carousel-item.active").attr("data-slide-no"); 
    $(".myCarousel-target.active").removeClass("active"); 
    $(".nav-indicators [data-slide-to=" + to_slide + "]").addClass("active"); 
    }); 
});

来源

2014-12-04 13:23:56 Bosc

我已经尝试过，但它doenst似乎工作。 – 2014-12-04 14:21:32

http://www.bootply.com/nxah8CQozF或者你的意思是你需要下一个和prev箭头来改变活动类吗？ – Bosc 2014-12-04 14:26:46

是的，当用户点击prev和下一个箭头。它现在工作良好，当点击菜单标签/ li – 2014-12-04 15:13:40

我通过分两个阶段完成任务。从旧指标中移除.active类并将class .active添加到新指标。

我用博斯克的想法，但在第一个中添加了一个额外的功能。

这里是例子：http://www.bootply.com/NTPzTEm6dn

这里是jQuery的：

$(document).ready(function() { 
 
    $(".carousel").carousel({ 
 
    interval: 5000 
 
    }); 
 
    $('#myCarousel').on('slide.bs.carousel', function() { 
 

 

 
    $(".myCarousel-target.active").removeClass("active"); 
 

 
    $('#myCarousel').on('slid.bs.carousel', function() { 
 

 
     var to_slide = $(".carousel-item.active").attr("data-slide-no"); 
 

 
     $(".nav-indicators li[data-slide-to=" + to_slide + "]").addClass("active"); 
 

 
    }); 
 
    }); 
 

 
});

.navbar-default .navbar-nav>.active>a, 
 
.navbar-default .navbar-nav>.active>a:hover, 
 
.navbar-default .navbar-nav>.active>a:focus { 
 
    color: #555; 
 
    background-color: purple; 
 
}

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</head> 
 

 
<body> 
 

 

 
    <nav class="navbar navbar-default" role="navigation"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
 
     <ol class="nav navbar-nav nav-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="myCarousel-target active"><a href="#">slide 1</a> 
 
     </li> 
 
     <li data-target="#myCarousel" data-slide-to="1" class="myCarousel-target"><a href="#">slide 2</a> 
 
     </li> 
 
     <li data-target="#myCarousel" data-slide-to="2" class="myCarousel-target"><a href="#">slide 3</a> 
 
     </li> 
 
     <li data-target="#myCarousel" data-slide-to="3" class="myCarousel-target"><a href="#">slide 4</a> 
 
     </li> 
 
     <li data-target="#myCarousel" data-slide-to="4" class="myCarousel-target"><a href="#">slide 5</a> 
 
     </li> 
 
     <li data-target="#myCarousel" data-slide-to="5" class="myCarousel-target"><a href="#">slide 6</a> 
 
     </li> 
 
     </ol> 
 
    </div> 
 
    </nav> 
 

 
    <div id="myCarousel" class="carousel slide"> 
 
    <div class="carousel-inner"> 
 
     <div data-slide-no="0" class="item carousel-item active"> 
 
     <div class="wrapper"> 
 
      &lt;%-- Slide 1 --%&gt; 
 
     </div> 
 
     </div> 
 
     <div data-slide-no="1" class="item carousel-item"> 
 
     <div class="wrapper"> 
 
      &lt;%-- Slide 2 --%&gt; 
 
     </div> 
 
     </div> 
 
     <div data-slide-no="2" class="item carousel-item"> 
 
     <div class="wrapper"> 
 
      &lt;%-- Slide 3 --%&gt; 
 
     </div> 
 
     </div> 
 
     <div data-slide-no="3" class="item carousel-item"> 
 
     <div class="wrapper"> 
 
      &lt;%-- Slide 4 --%&gt; 
 
     </div> 
 
     </div> 
 
     <div data-slide-no="4" class="item carousel-item"> 
 
     <div class="wrapper"> 
 
      &lt;%-- Slide 5 --%&gt; 
 
     </div> 
 
     </div> 
 
     <div data-slide-no="5" class="item carousel-item"> 
 
     <div class="wrapper"> 
 
      &lt;%-- Slide 6 --%&gt; 
 
     </div> 
 
     </div> 
 
    </div> 
 

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

 
</html>

来源

2016-10-20 16:47:59

如何在导航栏上制作引导程序传送带指示器

回答

相关问题