1

我有以下 HTML 问题。

描述

我正在构建一个“作者”页面，每个作者都有一个选项卡式系统。在一个选项卡中，我有简历，在另一个选项卡中，我有其他信息。

HTML 代码：

<div class="author-container"><img src="author-1.jpg" alt="">
  <ul>
    <li><a href="#inner-tab1">Bio</a></li>
    <li><a href="#inner-tab2">Other Info</a></li>
  </ul>
  <div id="inner-tab1">Bio copy</div>
  <div id="inner-tab2">Other Info copy</div>
</div>

<div class="author-container"><img src="author-2.jpg" alt="">
  <ul>
    <li><a href="#inner-tab1">Bio</a></li>
    <li><a href="#inner-tab2">Other Info</a></li>
  </ul>
  <div id="inner-tab1">Bio copy</div>
  <div id="inner-tab2">Other Info copy</div>
</div>

<div class="author-container"><img src="author-3.jpg" alt="">
  <ul>
    <li><a href="#inner-tab1">Bio</a></li>
    <li><a href="#inner-tab2">Other Info</a></li>
  </ul>
  <div id="inner-tab1">Bio copy</div>
  <div id="inner-tab2">Other Info copy</div>
</div>

是的，您已经检测到问题：重复 ID（inner-tab1和inner-tab2）

尽管选项卡实际上工作正常，我当然可以保留这些重复的 ID，但我知道这不是正确的方法。

问题

所以我的问题是：是否有另一个 HTML 属性可以替换id标签但仍然可以使用标签？

附加信息

为了创建选项卡，我使用了 jQueryUI 框架，并且该框架id在容器中使用了一个特定的选项卡应该显示。

提前致谢。

4

2 回答 2

2

使用类名，并将ids赋予author-containers。然后，您可以使用 选择元素$("#joe .inner-tab-2")。

于 2012-06-21T19:15:43.787 回答
0

尽管这已经按原样实现，但唯一的解决方案是使用不基于 ID 的更简单的选项卡系统。

不幸的是，我无法实现更简单的选项卡，我不得不硬着头皮将重复的 ID 留在标记上。它确实有效，但远非理想。

学过的知识。

这些选项卡将是正确使用的选项卡：http: //nuevvo.com/labs/simpletabs/

感谢大家的意见。

于 2012-08-15T16:34:59.690 回答