我想使用自举转盘和角度js来显示轮播内容中的图像。
但是,当导航链接点击时,它显示空白页。
但是,当导航链接点击时,它显示空白页。
我的代码示例如下。 (注意:此代码仅适用于Bootstrap 3.1.0,但不适用于AngularJS 1.2.13)
<div id="Carousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="Carousel" data-slide-to="0" class="active"></li> <li data-target="Carousel" data-slide-to="1"></li> <li data-target="Carousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="images/c.png" class="img-responsive"> </div> <div class="item"> <img src="images/b.png" class="img-responsive"> </div> <div class="item"> <img src="images/a.png" class="img-responsive"> </div> </div> <a class="left carousel-control" href="#Carousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#Carousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
解决方法
基于什么rbanning说,而不是添加事件处理程序,您可以在替换锚标签与span标签后,用“数据目标”属性替换href属性,引导管理其余。
像这样:
<div id="Carousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="Carousel" data-slide-to="0" class="active"></li> <li data-target="Carousel" data-slide-to="1"></li> <li data-target="Carousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="images/c.png" class="img-responsive"> </div> <div class="item"> <img src="images/b.png" class="img-responsive"> </div> <div class="item"> <img src="images/a.png" class="img-responsive"> </div> </div> <span class="left carousel-control" data-target="#Carousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </span> <span class="right carousel-control" data-target="#Carousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </span> </div>