适当的导航语法

Question

我怀疑用于导航的语法是这样的。

我还没有创建css文件，但这是应该如何工作的。例如，如果我点击链接导航中的主要内容将显示第一个元素，依此类推，其余部分将被隐藏。

以下是first variant

<nav role='navigation'>
  <a href="first">First</a>
    <a href="hello">Hello</a>
    <a href="best">Best button ever</a>
</nav>  
<section>
  <p class"1">X</p>
  <p class"hello">Hello</p>
  <p class"best">Im the best p element of the world</p>
</section>

HTML代码简单而干净，但css / javascript中的工作量多于第二个解决方案here

<nav role='navigation'>
  <ul>
    <li>Show child
      <ul>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>  
    </li>

    <li>Show child
      <ul>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>  
    </li>

    <li>Show child
      <ul>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>  
    </li>
  </ul>  
</nav> 

哪种变体以及为什么你会推荐我？

Answer 1

我建议你使用第一个例子。对于你想要达到的目的，这是完全足够的 - 第二个例子涉及使用嵌套的<ul>列表，这是完全没必要的，并且需要大量额外的标记，当你需要的只是每个导航的基本链接元素时项目