Question

我在onePage网站上工作。我有一个纯HTML的固定菜单，这里是代码：

<header class="header-menu">
    <div class="header-menu-inside">
        <h1>WM Flying</h1>
        <nav class="menu menustandard">
            <a class="target-section1 current" href="#section1">Home</a>
            <a class="target-section2" href="#section2">About</a>
            <a class="target-section3" href="#section3">Portfolio</a>
            <a class="target-section4" href="#section4">The team</a>
            <a class="target-section5" href="#section5">Contact</a>
        </nav>
    </div>
</header>

<div class="main" id="main">
    <section id="section1" class="home">
    </section>
    <section id="section2" class="about">
    </section>
    <section id="section3" class="portfolio">
    </section>
    <section id="section4" class="team">
    </section>
    <section id="section5" class="contact">
    </section>
</div>

然后我想更改“当前”部分以将不同的样式应用于所选菜单。这是我的javascript：

var currentSection = "section1";

function change($section){
    $('nav.menu a').removeClass('current');
    currentSection = $section.attr('id');
    $('body').removeClass();
    $('body').addClass( $section.attr('id') + '-visible' );
    $('.target-'+currentSection).addClass('current');
}

然后我只是应用这样的CSS：

nav a.current, nav a:hover{
    background: #F0F0F0;
    color: #E46C51;
}

调用该函数，我用这个：

$("#main section").waypoint( function( direction ) {
    if( direction === 'down' ) {
        change( $( this ) );
    }
}, { offset: '20%' } ).waypoint( function( direction ) {
    if( direction === 'up' ) {
        change( $( this ) );
    }
}, { offset: '-20%' } );

但它似乎不起作用。有人可以帮帮我吗？

非常感谢，

尼古拉斯

Answer 1

<option value="">Choose Segment</option>
<option value="{{ uploaded_segment.id }}">Brand1_April_2017_April_2017</option>

和CSS是

$(function () {
    // Select all links with hashes
    $('a[href*="#"]')
      // Remove links that don't actually link to anything
      .not('[href="#"]')
      .not('[href="#0"]')
      .click(function (event) {
          // On-page links
          if (
            location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
            &&
            location.hostname == this.hostname
          ) {
              // Figure out element
              var target = $(this.hash);
              target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
              // Does a target exist?
              if (target.length) {
                  //remove all class 'current-session before add new class'
                  $(".menustandard").children().removeClass("current-session");
                  var id_target = target.attr('id');
                  var current_section_menu = $(".menustandard " + "a[href='#" + id_target + "']");
                  //add css current section selector
                  current_section_menu.addClass('current-session');

                  // Only prevent default if animation is actually gonna happen
                  event.preventDefault();
              }
          }
      });
});

使用javascript检测当前部分

1 个答案: