如何使用JQuery让我的导航栏中的滑动条在点击时滑动

<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<link rel="stylesheet" href="styles.css">

<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
  <div class="slider"></div>
</nav>

nav {
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  flex: 1;
  text-align: center;
}

a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.slider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 33.33%;
  height: 3px;
  background-color: #000;
  transition: left 0.3s ease;
}

$(document).ready(function() {
  $('nav ul li a').click(function() {
    var target = $(this).attr('href');
    var targetLeft = $(target).position().left;
    var targetWidth = $(target).outerWidth();
    var slider = $('nav .slider');
    
    slider.css({
      'left': targetLeft,
      'width': targetWidth
    });
  });
});