导航默认选中第一个下边框为红色，当点击另一个的时候切换高亮，用jq方法代码具体实现

可以通过以下的 jQuery 代码实现导航栏下边框的高亮切换：

$(document).ready(function() {
  // 默认选中第一个导航项
  $('.nav-item').first().addClass('active');

  // 点击导航项切换高亮
  $('.nav-item').click(function() {
    $('.nav-item').removeClass('active');  // 移除所有导航项的高亮
    $(this).addClass('active');  // 给当前点击的导航项添加高亮
  });
});

上述代码中，首先通过 `$('.nav-item').first().addClass('active')` 给第一个导航项添加高亮样式。然后通过 `$('.nav-item').click(function() { ... })` 给所有导航项添加点击事件，当点击某个导航项时，先通过 `$('.nav-item').removeClass('active')` 移除所有导航项的高亮，再通过 `$(this).addClass('active')` 给当前点击的导航项添加高亮。其中，`.nav-item` 是导航项的类名，`.active` 是高亮样式的类名，可以根据实际情况进行修改。