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

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: ' >';}

本质上，当相应的幻灯片（0,1,2）处于活动状态时，导航后面将带有“>”。 任何方向都会有所帮助。

Answer 1

使用jQuery .data处理数据属性

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