Question

嘿所以我用引导程序构建了旋转木马和旋转木马导航。现在，我希望能够检测“data-slide-to”的值，并根据该值将样式应用于相应的导航项。

轮播导航

<div class="carouselNav">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-12 col-md-12 col-lg-12">
      <ul>
      <li><a class="" href="#featured" role="button" data-slide-to="0">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        <h3>Web Design</h3>
      </a></li>
      <li><a class="" href="#featured" role="button" data-slide-to="1">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        <h3>SEO</h3>
      </a></li>
      <li><a class="" href="#featured" role="button" data-slide-to="2">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        <h3>Project Management</h3>
      </a></li>
      </ul>
    </div><!-- col -->
    </div><!-- row -->
    </div><!-- container -->

建议的Javascript（其中#web将是给每个导航项的唯一ID）

    if (data-slide-to.value == 0) {
    $('#web').addClass('highlight');
} else {
    $('#web').removeClass('highlight');
}
});

提议的CSS

.highlight {
}
.hightlight::after {
content: ' >';}

基本上导航会有'＆gt;'之后相应的幻灯片（0,1,2）处于活动状态。任何方向都会有所帮助。

Answer 1

使用jQuery .data处理数据属性

http://api.jquery.com/data/

使用data-slide-to和javascript将类添加到轮播导航

1 个答案: