Question

如果滚动div，我想突出显示菜单项。滚动项目时，活动状态应切换到当前状态。如果单击菜单项，我已添加了活动类功能。

这是怎么做到的？人们会根据我的演示编码给出答案吗？感谢。

     var menuContainer = $('header').height();

 function scrollToAnchor(anchorName) {
   var aTag = $("div[name='" + anchorName + "']");
   $('html,body').animate({
     scrollTop: aTag.offset().top - menuContainer
   }, 'slow');
   console.log(anchorName);
 }
 var sidenav = $('#submenu');
 sidenav.delegate('.static', 'click', function(e) {
     e.preventDefault();
     sidenav.find('.submenu-active').toggleClass('submenu-active');
     $(this).toggleClass('submenu-active');
   })
   .find('.static:first').addClass('submenu-active');

    /* header - navigation */

#subnav {
  height: 100%;
  margin-right: auto;
  width: 100%;
  background-color: #1BBC9B;
  font-size: 120%;
}

#submenu ul {
  padding: 0;
  margin-top: 4px;
  margin-right: auto;
  margin-left: 0%;
  margin-bottom: 0;
  width: 650px;
}

#submenu li {
  display: inline;
  float: left;
}

#submenu li a {
  padding: 10px 20px;
  border-right: 1px solid #294C52;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.submenu-active {
  background-color: #294C52;
  color: #FFFFFF;
}

a {
  color: #294C52;
}

Answer 1

我做了类似这样的事情，我根据我按下的位置禁用并启用了css类。下面的示例代码（非常基本，但你明白了）

$('.square_mark').click(function () {
    if(!$(this).hasClass('active'))
        $(this).addClass('active');
    else
        $(this).removeClass('active');
    $('.polygon_mark').toggleClass("disabled");
});

$('.polygon_mark').click(function () {
    if(!$(this).hasClass('active'))
        $(this).addClass('active');
    else
        $(this).removeClass('active');
    $('.square_mark').toggleClass("disabled");
});

使用jQuery突出显示页面滚动上的活动菜单项

1 个答案: