时间戳

首页 > 解决方案 > 我如何使第一个 div 默认/在页面加载时可见？

angular - 我如何使第一个 div 默认/在页面加载时可见？

问题描述

我有动态内容并希望看到最新的内容/div。我将如何编辑下面 ts 文件中的代码来实现这一点？

ngOnInit() {
    var navBar = document.getElementById('navbar');
    navBar.addEventListener('click', (e: any)=> {
      var divDisplay = document.getElementById(e.target.hash.substring(1));
      var allDivs = document.querySelectorAll('.container div');
      allDivs.forEach((div: any) => div.style.display = 'none');
      divDisplay.style.display = 'block';
    })
  }

html:

<div id="navbar">
  <ul>
   <li><a href="#section1">Link 1</a></li>
   <li><a href="#section2">Link 2</a></li>
   <li><a href="#section3">Link 3</a></li>
   <li><a href="#section4">Link 4</a></li>  
  </ul>
</div>
<div class="container">
  <div id="section1">Section 1</div>
  <div id="section2">Section 2</div>
  <div id="section3">Section 3</div>
  <div id="section4">Section 4</div>
</div>

请在这里查看演示

标签： angulartypescript

解决方案

仅使用 CSS 的解决方案

您可以使用 CSS 选择器实现目标：:not(:last-child)

示例（基于您的 html）：

.container > div:not(:last-child) {
  display: none;
}
<div id="navbar">
  <ul>
   <li><a href="#section1">Link 1</a></li>
   <li><a href="#section2">Link 2</a></li>
   <li><a href="#section3">Link 3</a></li>
   <li><a href="#section4">Link 4</a></li>  
  </ul>
</div>
<div class="container">
  <div id="section1">Section 1</div>
  <div id="section2">Section 2</div>
  <div id="section3">Section 3</div>
  <div id="section4">Section 4</div>
</div>

有用的链接：

推荐阅读