在滚动上更改li活动类

时间：2018-04-20 02:28:24

标签： javascript jquery

我试图更改导航栏的li类并在google上搜索但我总是有一个例子可以改变＆＃34; a＆＃34;不是＆＃34; li＆＃34;。你能告诉我如何更改＆＃34; li＆＃34;元素不是＆＃34; a＆＃34;？

我使用此代码： https://codepen.io/rishabhp/pen/aNXVbQ 

var sections = $('section') c,
  nav = $('nav'),
  nav_height = nav.outerHeight();
$(window).on('scroll', function() {
  var cur_pos = $(this).scrollTop();
  sections.each(function() {
    var top = $(this).offset().top - nav_height,
      bottom = top + $(this).outerHeight();

    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('active');
      sections.removeClass('active');

      $(this).addClass('active');
      nav.find('a[href="#' + $(this).attr('id') + '"]').addClass('active');
    }
  });
});
nav.find('a').on('click', function() {
  var $el = $(this),
    id = $el.attr('href');
  $('html, body').animate({
    scrollTop: $(id).offset().top - nav_height
  }, 500);
  return false;
});

4 个答案:

答案 0 :(得分：1)

你试图做这样的事吗？

var sections = $('section')
  , nav = $('nav')
  , nav_height = nav.outerHeight();

$(window).on('scroll', function () {
  var cur_pos = $(this).scrollTop();
  
  sections.each(function() {
    var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();
    
    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('li').removeClass('active');
      sections.removeClass('active');
      
      $(this).addClass('active');
      nav.find('a[href="#'+$(this).attr('id')+'"]').parent("li").addClass('active');
    }
  });
});

nav.find('a').on('click', function () {
  var $el = $(this)
    , id = $el.attr('href');
  
  $('html, body').animate({
    scrollTop: $(id).offset().top - nav_height + 100
  }, 500);
  
  return false;
});
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
}

/* Navigation */

nav {
  width: 100%;
  height: 60px; 
  position: fixed; 
  top: 0;
  background: #1ABC9C;
}

nav ul {
  padding: 20px;
  margin: 0 auto;
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
  margin: 0 10px;
}
nav ul li a {
  padding: 10px 0;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
}
nav ul li a:hover {
  color: #34495E;
}
a.active {
  border-bottom: 2px solid #ecf0f1;
  color: #34495E;
}

li.active a {
  border-bottom: 2px solid #ecf0f1;
  color: #34495E;
}

/* Headings */

h1 {
  font-size: 5rem;
  color: #34495E;
}

/* Sections */

section {
  width: 100%;
  padding: 50px;
  background: #fff;
  border-bottom: 1px solid #ccc;
  height: 500px;
  text-align: center;
}
section:nth-child(even) {
  background: #ecf0f1;
}
section:nth-child(odd) {
  background: #bdc3c7;
}
.sections section:first-child {
  margin-top: 60px;
}
section.active {}

footer {
  height: 500px;
  background: #34495e;
}
<nav>
  <ul>
    <li><a href="#1">First</a></li>
    <li><a href="#2">Second</a></li>
    <li><a href="#3">Third</a></li>
    <li><a href="#4">Fourth</a></li>
    <li><a href="#5">Fifth</a></li>
  </ul>
</nav>

<div class="sections">
  <section id="1"><h1>First</h1></section>
  <section id="2"><h1>Second</h1></section>
  <section id="3"><h1>Third</h1></section>
  <section id="4"><h1>Fourth</h1></section>
  <section id="5"><h1>Fifth</h1></section>
</div>

<footer></footer>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

答案 1 :(得分：0)

如果您不想过多地更改该代码，则可以执行

nav.find('li').removeClass('active');
sections.removeClass('active');

$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').parent().addClass('active');

这是在“on scroll”事件函数中。这样，您可以定位列表项而不是锚标记。

答案 2 :(得分：0)

以下是基于https://codepen.io/rishabhp/pen/aNXVbQ上的代码的问题解决方案。我已将nav.find('a').removeClass('active');更改为nav.find('li').removeClass('active');，因为我们已将active类添加到li而不是锚标记，nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');添加到nav.find('a[href="#'+$(this).attr('id')+'"]').parent().addClass('active');，因为父级锚定它li。

＆＃13;
＆＃13; 
var sections = $('section')
  , nav = $('nav')
  , nav_height = nav.outerHeight();

$(window).on('scroll', function () {
  var cur_pos = $(this).scrollTop();
  
  sections.each(function() {
    var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();
    
    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('li').removeClass('active');
      sections.removeClass('active');
      
      $(this).addClass('active');
      nav.find('a[href="#'+$(this).attr('id')+'"]').parent().addClass('active');
    }
  });
});

nav.find('a').on('click', function () {
  var $el = $(this)
    , id = $el.attr('href');
  
  $('html, body').animate({
    scrollTop: $(id).offset().top - nav_height
  }, 500);
  
  return false;
});
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
}

/* Navigation */

nav {
  width: 100%;
  height: 60px; 
  position: fixed; 
  top: 0;
  background: #1ABC9C;
}

nav ul {
  padding: 20px;
  margin: 0 auto;
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
  margin: 0 10px;
}
nav ul li a {
  padding: 10px 0;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
}
nav ul li a:hover {
  color: #34495E;
}
a.active {
  border-bottom: 2px solid #ecf0f1;
}

/* Headings */

h1 {
  font-size: 5rem;
  color: #34495E;
}

/* Sections */

section {
  width: 100%;
  padding: 50px;
  background: #fff;
  border-bottom: 1px solid #ccc;
  height: 500px;
  text-align: center;
}
section:nth-child(even) {
  background: #ecf0f1;
}
section:nth-child(odd) {
  background: #bdc3c7;
}
.sections section:first-child {
  margin-top: 60px;
}
section.active {}

footer {
  height: 500px;
  background: #34495e;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#1">First</a></li>
    <li><a href="#2">Second</a></li>
    <li><a href="#3">Third</a></li>
    <li><a href="#4">Fourth</a></li>
    <li><a href="#5">Fifth</a></li>
  </ul>
</nav>

<div class="sections">
  <section id="1"><h1>First</h1></section>
  <section id="2"><h1>Second</h1></section>
  <section id="3"><h1>Third</h1></section>
  <section id="4"><h1>Fourth</h1></section>
  <section id="5"><h1>Fifth</h1></section>
</div>

<footer></footer>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

var sections = $('section'),
  nav = $('nav'),
  nav_height = nav.outerHeight();

$(window).on('scroll', function() {
  var cur_pos = $(this).scrollTop();

  sections.each(function() {
    var top = $(this).offset().top - nav_height,
      bottom = top + $(this).outerHeight();

    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('li').removeClass('active');
      sections.removeClass('active');

      $(this).addClass('active');
      nav.find('a[href="#' + $(this).attr('id') + '"]').parent().addClass('active');
    }
  });
});

nav.find('a').on('click', function() {
  var $el = $(this),
    id = $el.attr('href');

  $('html, body').animate({
    scrollTop: $(id).offset().top - nav_height
  }, 500);

  return false;
});
/* NAVBAR */

.navbar {
  margin-bottom: 0;
  min-height: 0;
}

.navbar-nav {
  display: inline-block !important;
  float: none;
  height: auto !important;
}

.navbar-nav>li>a {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 15px;
  font-family: 'Lato', sans-serif;
  border-bottom: 3px solid transparent;
  transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
}

.navbar-offcanvas .navbar-nav>li.active>a:hover,
.navbar-offcanvas .navbar-nav>li.active>a:focus,
.navbar-offcanvas .navbar-nav>li.active>a:active,
.navbar-offcanvas .navbar-nav>li.active>a:active:hover,
.navbar-offcanvas .navbar-nav>li.active>a:active:focus {
  color: #f6b5ad !important;
  background-color: transparent !important;
  border-bottom: 3px solid #f6b5ad;
}

.nav li a img {
  height: 28px;
}

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
  border-color: #f6b5ad;
}

.navbar-nav li:hover .dropdown-menu a {
  border-bottom: none;
}
<nav class="navbar navbar-default pad-top-10 box-shadow hidden-navbar hidden-xs">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="navbar-offcanvas navbar-offcanvas-touch text-center" id="navbar">
      <div id="menu-center">
        <ul class="nav navbar-nav text-uppercase">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="story.php">Our Story</a></li>
          <li><a href="#wedding">Our Wedding</a></li>
          <li><a href="#photo">Our Photo</a></li>
          <li><a href="#party">Our Party</a></li>
          <li><a href="#dress">Our Dresses</a></li>
          <li><a href="#gallery">Our Gallery</a></li>
          <li><a href="#news">Our News</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

这是我的完整代码的样子，我已经尝试了上面的建议，但仍然无法正常工作......

相关问题
最新问题