Изготовление сухаря из ссылки, советы?

Question

У меня есть маленький вопрос. Я занят, чтобы сделать свой собственный веб-сайт:

HTML:

<nav> 
<ul class="menu"> 
    <li><a href="#home">HOME</a></li> 
    <li><a href="#about">ABOUT</a></li> 
    <li><a href="#portfolio">PORTFOLIO</a></li> 
    <li><a href="#contact">CONTACT</a></li> 
</ul> 
</nav> 

Теперь есть одна вещь, которую я нахожу некоторые проблемы; Я хочу, чтобы мой посетитель знал, на какой части сайта он смотрит.

Например,

Если вы наведете указатель мыши по ссылкам, вы получите черный фон. Но я хочу, чтобы этот фон оставался так долго, как только вы находитесь на этой конкретной странице.

Так что если вы нажмете «контакт», черный фон будет виден по этой ссылке, пока вы останетесь на этой странице.

Answer 1

Вы должны подключиться к событию документа scroll. Вот скрипка, которую я нашел: http://jsfiddle.net/cse_tushar/Dxtyu/141/.

Во время прокрутки проверки обратных вызовов onScroll, которые в настоящий момент видны div. Он делает это, сравнивая текущее положение полосы прокрутки (более или менее - scrollPos) с позициями и высотами всех контейнеров div. Если он находит совпадение, он добавляет определенный класс active к ссылке в меню. Для всех остальных div s, active класс удален.

Код JavaScript также содержит плавную прокрутку, но вы уже реализовали его, поэтому можете просто игнорировать его.

Answer 2

Довольно простой метод будет:

Определить стиль для .active класса в вашем CSS так:

.menu a:hover, 
.menu .active a { 
    color: #fff; 
    background-color: #000; 
    padding: 5px; 
} 

И добавить некоторые JavaScript, который переключает класс по щелкнули элемента:

$('.menu').on('click', 'a', function (event) { 
    event.preventDefault(); 
    $(this).parent().addClass('active').siblings().removeClass('active'); 
}); 

См. Это fiddle для быстрого рабочего примера.

Answer 3

Создать класс активен с тем же стилем парения и добавить его в ссылку на клик и изменить его на свиток или при нажатии на другую ссылку следующим

Добавьте это в CSS

.menu a.active { 
color: #fff; 
background-color: black; 
padding: 5px; 
} 

Добавьте это в свой JS

$(function(){ 
//onclick 
$('.menu a').click(function(){ 
$('.menu a').removeClass('active'); 
$(this).addClass('active'); 
}); 
//onscroll 
$(document).on("scroll", onScroll); 
}); 

function onScroll(event){ 
    var scrollPos = $(document).scrollTop(); 
    $('#menu-center a').each(function() { 
     var currLink = $(this); 
     var refElement = $(currLink.attr("href")); 
     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
      $('#menu-center ul li a').removeClass("active"); 
      currLink.addClass("active"); 
     } 
     else{ 
      currLink.removeClass("active"); 
     } 
    }); 
} 

Answer 4

Я видел код на вашей странице. Я предлагаю вам сделать два незначительных изменения.

Edit css.css на линии 77 и добавить дополнительный селектор в это определение CSS для ссылок, которые имеют «активные»:

.menu a:visited, 
.menu a.active{ 
    color: #fff; 
    background-color: black; 
} 

Вы также должны изменить сценарий.JS для переключения «активного» класса по ссылкам, когда пользователь нажимает на них, я добавил их с комментариями см:

$(function() { 
    $('[data-typer-targets]').typer(); 
}); 

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 

     // removes the active class from all the link in the menu 
     $('a', $(this).parent().parent()).toggleClass('active', false); 
     // adds the active class to the link that was clicked 
     $(this).toggleClass('active', true); 

     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

Я мотыга это помогает.

Answer 5

я сделал что-то подобное с помощью Точку http://imakewebthings.com/jquery-waypoints/ функции прокрутки

// On Scroll Change Nav 
    jQuery('.bullseye').waypoint(function(direction) { 
     var idThis = jQuery(this).attr('id'); 

     if(direction === 'down'){ 
      jQuery('a.scroll').removeClass('active'); 
      jQuery('a[href="#'+idThis+'"]').addClass('active'); 
      //console.log(idThis); 
     }   
    }, { offset: 75 }); 

    jQuery('.bullseye').waypoint(function(direction) { 
     var idThis = jQuery(this).attr('id'); 

     if(direction === 'up'){ 
      jQuery('a.scroll').removeClass('active'); 
      jQuery('a[href="#'+idThis+'"]').addClass('active'); 
      //console.log(idThis); 
     }   
    }, { offset: 'bottom-in-view' }); 

Где .bullseye класс вам нужно добавить к разделам (#home, #about, #portfolio, #contact).

А потом сценарий для события щелчка на меню (вам нужно добавить класс .scroll в меню ссылки или просто переделывать сценарий)

// Smooth Scroll 
    jQuery('a.scroll[href*=#]:not([href=#])').click(function() { 

     jQuery('a.scroll').removeClass('active');   
     var hrefMatch = jQuery(this).attr('href'); 

     jQuery('a[href="'+hrefMatch+'"]').addClass('active'); 

    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
     || location.hostname == this.hostname) { 

     var target = jQuery(this.hash);  
     target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     jQuery('html,body').animate({ 
      scrollTop: target.offset().top - 75 
     }, 1000); 

     return false; 
     } 
    } 
    }); 

И последнее, но не в последнюю очередь, для активный класс для работы

.menu a.active{ 
color: #fff; 
background-color: black; 
padding: 5px; 
} 

И это все в основном :) проголосовать меня, если вы сделаете это, чтобы работать :)

Answer 6

Я хотел бы предложить:

$('ul.menu a').each(function() { 
    $(this).toggleClass('activePage', this.getAttribute('href') === window.location.hash); 
}); 

Или просто:

$('a[href="' + window.location.hash + '"]').addClass('activePage');