我为我的网站创建了一个导航菜单，它在活动页面链接上有一些样式，我的代码工作正常，直到我添加任何重定向链接到“a”标记的“href”属性，当我设置“href”值为“#”一切正常。
下面是我的HTML，CSS和JS代码的导航菜单。

$(document).ready(function(){
  $('.navbar ul li').on('click',function(){
    $(this).addClass('active');
    $(this).siblings().removeClass('active');

  })
})

.navbar {
      padding: 0;
    }
  
    .navbar ul {
      margin: 0;
      padding: 0;
      display: flex;
      list-style: none;
      align-items: center;
    }
  
    .navbar li {
      position: relative;
    }
  
    .navbar a,
    .navbar a:focus {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0 10px 30px;
      font-family: Georgia, serif;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 13px;
      font-weight: 400;
      color: rgb(0, 0, 0);
      white-space: nowrap;
      transition: 0.3s;
      text-decoration:none;
    }
  
    .navbar a i,
    .navbar a:focus i {
      font-size: 12px;
      line-height: 0;
      margin-left: 5px;
    }
  
    .navbar a:hover,
    .navbar .active>a,
    .navbar .active:focus,
    .navbar li:hover>a {
      color: green;
      text-decoration: underline;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navbar" class="navbar">
        <ul>
          <li class="active"><a href="index.php" >Home</a></li>
          <li><a href="workflow.php">Work flow</a>
          <li><a href="illustration.php">Illustration</a></li>
          <li><a href="about.php">About</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
      </nav><!-- .navbar -->