如何创建如下所示的底部导航视图？有可能吗？

<ul class="bottom-navigation">
  <li><a href="#home">Home</a></li>
  <li><a href="#search">Search</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f1f1f1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.bottom-navigation li {
  flex: 1;
  text-align: center;
  padding: 10px 0;
}

.bottom-navigation li a {
  text-decoration: none;
  color: #888;
}

.bottom-navigation li a:hover {
  color: #555;
}

var navigationItems = document.querySelectorAll('.bottom-navigation li');

for (var i = 0; i < navigationItems.length; i++) {
  navigationItems[i].addEventListener('click', function() {
    var current = document.querySelector('.bottom-navigation .active');
    current.classList.remove('active');
    this.classList.add('active');
  });
}