语义方法：水平导航标签又名liteaccordion

Question

我尝试根据这个概念制作语义网站： 我有正常的导航：

<nav>
 <ul>
  <li><a/></li>
  ...
  <li><a/></li>
</nav>

并且标签中的内容与liteaccordion中的内容一致。

它在litecordion中的工作原理（＃2 ）： 内容必须在<li>内，但无效。所以在js start之前的纯HTML是正常的：

<div class="content"/>
...
<div class="content"/>
<nav/>

结构。在加载时，JS将每个内容移动到正确的li选项卡：

<nav>
 <ul>
  <li class="foo content">
   <a/>
   <div class="foo content"/>
  </li>
  ...
  <li class="bar content">
   <a/>
   <div class="bar content"/>
  </li>
</nav>

然后Litecordion开始......

但是我做了一些工作（＃1 在图片上），即使在JS操作之后也使其100％语义化。在那里导航只是在内容div上的另一层。它检测标签的实际位置并设置适当内容的位置。但是要计算很多事件。

Live example，它既复杂又缓慢且有错误。

所以我问，是否值得为使用JS的用户创建语义单独的导航和内容？我是否需要检测一些搜索机器人等？该示例将使用ajax，但对于没有js的人/机器人，它将是完全语义的。