1

我在创建选项卡式界面时遇到了一个小问题。我们使用的系统在添加到目录时仅在一个文本字段中包含产品内容。所以 HTML 标记看起来像这样，并且可以将 p 和 ul（甚至 table）元素作为内容（不幸的是，不能添加任何类或 id）：

<div class="productDesc">
   <h1>Content 1</h1>
   <p>Content 1 content</p>

   <h1>Content 2</h1>
   <ul>
     <li>Content 2 content #1</li>
     <li>Content 2 content #2</li>
     <li>Content 2 content #3</li>
   </ul>

   <h1>Content 3</h1>
   <p>Content 3 content #1</p>
   <p>Content 3 content #2</p>
   <p>Content 3 content #3</p>
</div>

我想做的是创建一个选项卡式界面，让每个H1元素都是一个选项卡，它的内容当然是单击选项卡时应该显示的内容。

有没有办法遍历 HTML 以获得如下所示的最终结果：

<div id="tabs">
   <ul class="productTabs">
      <li><a href="#Content1">Content 1</a></li>
      <li><a href="#Content2">Content 2</a></li>
      <li><a href="#Content3">Content 3</a></li>
   </ul>
</div>

<div id="productDesc">
   <div id="Content1">
      <p>Content 1 content</p>
   </div>
   <div id="Content2">
      <ul>
         <li>Content 2 content #1</li>
         <li>Content 2 content #2</li>
         <li>Content 2 content #3</li>
      </ul>
   </div>
   <div id="Content3">
      <p>Content 3 content #1</p>
      <p>Content 3 content #2</p>
      <p>Content 3 content #3</p>
   </div>
</div>

一旦我修复了 HTML 标记，我应该能够使选项卡工作。

4

2 回答 2

1

如果您绝对无法更改生成的标记：

var productDesc = $('div.productDesc');
var newProductDesc = $('<div/>').attr('id', 'productDesc');
var tabs = $('<div/>').attr('id', 'tabs').insertBefore(productDesc);
var productTabs = $('<ul/>').addClass('productTabs').appendTo(tabs);

var i = 0;
var lastTabContent;
productDesc.children().each(function() {
    if($(this).is('h1')) {
        i++;
        $('<li/>').appendTo(productTabs).append($('<a/>').attr('href', '#Content' + i).html($(this).html()));
        lastTabContent = $('<div/>').attr('id', 'Content' + i).appendTo(newProductDesc);
    } else {
        $(this).appendTo(lastTabContent);
    }
});
productDesc.replaceWith(newProductDesc);

jsfiddle

于 2012-10-15T16:13:57.040 回答
0

如果您希望转换 HTML 标记，我建议您使用XSLT。更改 HTML 标记并可能使用jQuery 选项卡插件作为选项卡

于 2012-10-15T15:45:55.153 回答