Bootstrap CSS活动导航

小编典典

Bootstrap CSS活动导航

html

在Bootstrap网站上，子导航与部分匹配，并在您更改背景颜色或滚动到该部分。我想创建自己的菜单，但不包含所有背景色和所有内容，但是，我将CSS更改为相似，但是当我向下滚动或单击菜单项时，活动类不会切换。不知道我在做什么错。

HTML：

<ul class="menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

CSS：

.menu {list-style:none;}
.menu > li {float: left;}
.menu > li > a {color:#555;float: none;padding: 10px 16px 11px;display: block;}
.menu > li > a:hover {color: #F95700;}
.menu .active > a, .menu .active > a:hover {color:#F95700;}

我检查了文件；jQuery，bootstrap.js和bootstrap.css均已正确链接。我是否必须添加一些其他的jQuery还是缺少一些CSS才能像他们站点上的subnav菜单一样主动切换？

阅读 341

2020-05-10

共1个答案

小编典典

为了切换类，您需要执行一些JavaScript。

在jQuery中：

$('.menu li a').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

在JavaScript中：

var menu = document.querySelector('.menu');
var anchors = menu.getElementsByTagName('a');

for (var i = 0; i < anchors.length; i += 1) {
  anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
}

function clickHandler(anchor) {
  var hasClass = anchor.getAttribute('class');
  if (hasClass !== 'active') {
    anchor.setAttribute('class', 'active');
  }
}

我希望这有帮助。

2020-05-10