1

タブ付きインターフェイスの作成に少し問題があります。カタログに追加したときに、1つのテキストフィールドにのみ製品のコンテンツがあるシステムを使用しています。したがって、HTMLマークアップは次のようになり、コンテンツとしてp要素とul要素（テーブルも含む）の両方を含めることができます（残念ながら、クラスや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 に答える