Question

我正在使用BS ScrollSpy＆amp;想要为当前在视图中的每个部分添加/删除一个类。喜欢＆＃34;活跃＆＃34;或者＆＃34;观看＆＃34;或类似的。这只能使用BS JS吗？

一次一个。

<section id="welcome" class="section-section">

<section id="welcome" class="section-section in-view">

Answer 1

我已经创建了一个小代码段，您可以将.active类添加到当前部分，然后从其他部分删除。

检查演示 HERE

HTML：

<!-- Navs to be spied and automatically change through navigation -->
<div id="navs">
  <ul class="nav nav-pills">
    <li role="presentation" class="active">
      <a href="#top">Top</a>
    </li>
    <li role="presentation">
      <a href="#middle">Middle</a>
    </li>
    <li role="presentation">
      <a href="#bottom">Bottom</a>
    </li>
  </ul>
</div>

<!-- The component "component-to-spy" is spying now "navs" -->
<div id="component-that-spies" data-spy="scroll" data-target="#navs">
  <!-- You can use any component you want. Try to use an <ul> for the bottom section instead of an <h4> -->
 <section id="top" class="section-section">
   <h4 >Top</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

   <section id="middle" class="section-section">
       <h4>Middle</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="bottom" class="section-section">
    <h4 id="bottom">Bottom</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>


</div>

JS：

function scrollActive(currentId) {
  $('.section-section').removeClass('active');
  $(currentId).addClass('active');
}

$('.nav li').on('activate.bs.scrollspy', function(e) {
  var targetId = $(e.target).find('a').attr('href');
  scrollActive(targetId);

})

我希望它可以帮到你

BootStrap ScrollSpy将类添加/删除到视图中的部分

1 个答案: