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>

现在有一件事我发现了一些问题; 我想让访问者知道他正在查看的网站的哪个部分。

例如;

如果您现在悬停在链接上，您将获得黑色背景。但是我希望这个背景可以保留在特定页面上。

因此，如果您点击“联系”＆＃39;只要您留在该页面上，黑色背景就会在该链接上显示。

Answer 1

使用相同的悬停样式创建一个活动的类，并在单击时将其添加到链接，并在滚动时更改它，或者单击其他链接，如下所示

将此添加到您的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 2

您必须连接到文档的scroll事件。这是我发现的小提琴：http://jsfiddle.net/cse_tushar/Dxtyu/141/。

在滚动期间，onScroll回调会检查当前可见的div。它通过比较滚动条的当前位置（或多或少 - scrollPos）与所有div容器的位置和高度来实现。如果找到匹配项，则会在菜单中的链接中添加某个类active。对于所有其他div s，active类将被删除。

JavaScript代码还包含平滑滚动，但您已经实现了它，因此您可以忽略它。

Answer 3

一个相当简单的方法是：

在CSS中为.active类定义样式，如下所示：

.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 4

我已经看到了您网页上的代码。我建议你做两个小的改动。

在第77行编辑css.css并为该css定义添加一个额外的选择器，用于具有＆＃34; active＆＃34;的链接：

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

您还必须修改script.js以切换＆＃34;活动＆＃34;当用户点击它们时链接上的类，我已添加评论，请参阅：

$(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

我使用Waypoint 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）。

然后是菜单上的click事件的脚本（您需要将.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');

从链接中提取面包屑，提示？

6 个答案: