jQuery对底部导航进行跳转并高亮显示的实例代码

一、底部导航条的HTML代码示例：

<div id="bottom-navbar">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#product">产品</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</div>

其中，id="bottom-navbar"是容器元素的ID，后续需要使用jQuery选择器来定位。

二、为底部导航条添加高亮显示的CSS样式：

#bottom-navbar li.active a {
  color: #FF0000; /*高亮颜色为红色*/
}

其中，已选项的LI元素添加.active的类名，通过CSS样式控制链接的颜色，这里设为红色。

三、jQuery实现对底部导航进行跳转并高亮显示的示例代码：

$(document).ready(function() {
  // 点击导航链接
  $('#bottom-navbar a').click(function() {
    // 移除所有已有.active类名
    $('#bottom-navbar li').removeClass('active');
    // 添加.active类名到指定的LI元素
    $(this).parent().addClass('active');
    // 通过动画滑动到目标位置
    $('html, body').animate({
      scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
    // 取消默认跳转行为
    return false;
  });
});

这段代码实现的是在页面滚动到指定位置的同时，对应的导航项进行高亮显示。具体实现步骤如下：

1. 点击导航链接时，首先移除所有已有的.active类名，以确保只有一个菜单项被高亮。
2. 接着，给被点击的链接对应的父级LI添加.active类名，以实现高亮效果。
3. 然后，通过jQuery的animate()函数，实现页面的滚动效果。这里使用了scrollTop和offset()定位目标位置。
4. 最后，返回false以取消默认的跳转行为。

四、示例说明：

1. 当用户点击“关于我们”导航链接时，底部导航条中的“关于我们”菜单项将被高亮显示，并且页面将自动滚动到页面中带有id="about"的元素位置。
2. 当用户滚动到页面中带有id="product"的元素位置时，底部导航条中的“产品”菜单项将被高亮显示。