使用JS

Question

我有一个带有三个链接的导航。我想做的是，如果单击了特定链接，则显示在这些链接上配对的三个框之一。我为这些<li>元素设置了数据导航：

<li class="active" data-nav="1">Prerender</li><li data-nav="2">Prefetch</li><li data-nav="3">Preconnect</li>

我也有这三个框，只有单击成对的<li>元素时，这些框才可见

<div class="content-box box1">
        <h3 id="isPrerender"> Prerendered page: <span id='pagetitle'></span></h3>
      </div>

      <div class="content-box box2">
        <h3 id="isPrerender"> Page2: <span id='pagetitle'></span></h3>
      </div>
    </div>

这是我的.css文件中的内容

.box1, .box2, .box3{display: none;}
        .expanded{display: block !important;}

这是在与单击的<li>元素配对的框上设置扩展类的地方：

for (var i = 0; i < menu_items.length; i++) {
  menu_items[i].onclick = function() {

  var navId = this.getAttribute('data-nav');
  document.getElementByClassName('box' + navId).classList.add('expanded');

    }
  }
}

问题在于，即使我添加了display: none类，仍然设置了expanded。如果我查看控制台，则display: block规则在这里，但已被删除。如何重写它？

Answer 1

我认为您可以先使用JavaScript或（隐藏元素）加载，然后再在功能设置显示块或（显示元素）中设置不显示 如果要替换该类，请不要使用！important，否则应删除该类，然后添加其他类