Определить текущий раздел с помощью JavaScript

Question

Определить текущий раздел с помощью JavaScript

0

Я работаю над сайтом 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%' } );

Но, похоже, это не работает. Может кто-нибудь мне помочь?

Большое спасибо,

никола

Nicolas Wilhem 06 март 2014, в 09:00

Источник

0

Не работает? Как так? Что оно делает? Есть ошибки?
bjb568 06 март 2014, в 07:35
0

Нет, это просто ничего не делает ... Как будто бы не использовалась ни одна функция
Nicolas Wilhem 06 март 2014, в 07:39
0

Ну, функция была вызвана? Поместите в него файл console.log.
bjb568 06 март 2014, в 07:41
1

Хм ... как именно вы вызываете функцию здесь?
Gil 06 март 2014, в 07:42
0

См редактировать на основной пост
Nicolas Wilhem 06 март 2014, в 07:44
1

Теперь у меня есть эта ошибка: TypeError: 'undefined' не является функцией (оценивает '$ ("# main section"). Waypoint (function (direction) {...
Nicolas Wilhem 06 март 2014, в 07:47
0

убедитесь, что ваша библиотека путевых точек включена в imakewebthings.com/jquery-waypoints
Alex 06 март 2014, в 08:03
0

В своей работе мне необходимо использовать YUI, чтобы мой JQuery был довольно ржавым, но кажется, что 'waypoint' не является частью JQuery, а является надстройкой, поэтому проверьте, включена ли она в ваш код.
Gil 06 март 2014, в 08:05
0

Да, путевые точки хорошо включены
Nicolas Wilhem 06 март 2014, в 08:10
0

ИЗВИНИТЕ РЕБЯТА!!!!! Это потому, что я включил путевые точки до jquery ... !!! Гррррр так глупо.
Nicolas Wilhem 06 март 2014, в 08:32

Показать ещё 8 комментариев

Теги:

javascript

jquery

html

css

website

1 ответ

Ещё вопросы

Не работает? Как так? Что оно делает? Есть ошибки?
Нет, это просто ничего не делает ... Как будто бы не использовалась ни одна функция
Ну, функция была вызвана? Поместите в него файл console.log.
Хм ... как именно вы вызываете функцию здесь?
См редактировать на основной пост
Теперь у меня есть эта ошибка: TypeError: 'undefined' не является функцией (оценивает '$ ("# main section"). Waypoint (function (direction) {...
убедитесь, что ваша библиотека путевых точек включена в imakewebthings.com/jquery-waypoints
В своей работе мне необходимо использовать YUI, чтобы мой JQuery был довольно ржавым, но кажется, что 'waypoint' не является частью JQuery, а является надстройкой, поэтому проверьте, включена ли она в ваш код.
Да, путевые точки хорошо включены
ИЗВИНИТЕ РЕБЯТА!!!!! Это потому, что я включил путевые точки до jquery ... !!! Гррррр так глупо.

megadragon · Answer 1 · 2017-05-24T05-32-00.000Z

$(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();
              }
          }
      });
});

и CSS

.current-session{
    //your style here
}