jQueryのタブ：私は<strong>jQueryの</strong>、J * <em>クエリUIタブ</em> *、<strong>Drupalの</strong>が私をouputingされていることをこの形式からして、いくつかのタブを作成しようとしているのdivとLi cutom形式から作成タブではない例の方法

Question

...

私は出力を行ういくつかのオプションがありますが、これは私が選択したものですが、NONEはデモページの例のものに似ています... 多分私はUIタブのaddtabか、このフォーマットのタブ作成を強制するもの？

誰でも私の手助けをすることができますか？

<div class="view-content"> 
    <div class="item-list"> 
     <h3>La base</h3> 

     <ul> 
     <li class="views-row views-row-1 views-row-odd views-row-first"> 
      <div class="views-field-field-imagen-miniatura-fid"> 
      <span class="field-content"><img height="57" width="67" class= 
      "imagecache imagecache-lo_mas_leido_54_46 imagecache-default imagecache-lo_mas_leido_54_46_default" 
      title="" alt="" src= 
      "/sites/default/files/imagecache/lo_mas_leido_54_46/para_gustos_macetas.jpg" /></span> 
      </div> 

      <div class="views-field-title"> 
      <span class="field-content"><a href="/huerto-urbano/para-gustos-macetas">Para 
      gustos, macetas</a></span> 
      </div> 

      <div class="views-field-teaser"> 
      <span class="field-content">Cada planta es un universo y tiene sus 
      particularidades y caprichos pero, para hacernos una idea...</span> 
      </div> 

      <div class="views-field-view-node"> 
      <span class="field-content"><a href="/huerto-urbano/para-gustos-macetas">Leer 
      m&Atilde;&iexcl;s</a></span> 
      </div> 
     </li> 

     <li class="views-row views-row-2 views-row-even"> 
      <div class="views-field-field-imagen-miniatura-fid"> 
      <span class="field-content"><img height="57" width="67" class= 
      "imagecache imagecache-lo_mas_leido_54_46 imagecache-default imagecache-lo_mas_leido_54_46_default" 
      title="" alt="" src= 
      "/sites/default/files/imagecache/lo_mas_leido_54_46/la_mesa_de_cultivo_ideal_0.jpg" /></span> 
      </div> 

      <div class="views-field-title"> 
      <span class="field-content"><a href= 
      "/huerto-urbano/la-mesa-de-cultivo-ideal">La mesa de cultivo ideal</a></span> 
      </div> 

      <div class="views-field-teaser"> 
      <span class="field-content">Hace ya tiempo que la tendencia del Huerto Urbano 
      est&Atilde;&iexcl; arraigando en las ciudades. Ante este nuevo...</span> 
      </div> 

      <div class="views-field-view-node"> 
      <span class="field-content"><a href= 
      "/huerto-urbano/la-mesa-de-cultivo-ideal">Leer m&Atilde;&iexcl;s</a></span> 
      </div> 
     </li> 

     <li class="views-row views-row-3 views-row-odd"> 
      <div class="views-field-field-imagen-miniatura-fid"> 
      <span class="field-content"><img height="57" width="67" class= 
      "imagecache imagecache-lo_mas_leido_54_46 imagecache-default imagecache-lo_mas_leido_54_46_default" 
      title="" alt="" src= 
      "/sites/default/files/imagecache/lo_mas_leido_54_46/ojo_que_plantamos_1.jpg" /></span> 
      </div> 

      <div class="views-field-title"> 
      <span class="field-content"><a href= 
      "/huerto-urbano/%C2%A1ojo-que-plantamos">&Acirc;&iexcl;Ojo, que 
      plantamos!</a></span> 
      </div> 

      <div class="views-field-teaser"> 
      <span class="field-content">Al crear, mantener y disfrutar de nuestro huerto 
      urbano debemos tener en cuenta ciertas medidas de...</span> 
      </div> 

      <div class="views-field-view-node"> 
      <span class="field-content"><a href= 
      "/huerto-urbano/%C2%A1ojo-que-plantamos">Leer m&Atilde;&iexcl;s</a></span> 
      </div> 
     </li> 

     <li class="views-row views-row-4 views-row-even views-row-last"> 
      <div class="views-field-field-imagen-miniatura-fid"> 
      <span class="field-content"><img height="57" width="67" class= 
      "imagecache imagecache-lo_mas_leido_54_46 imagecache-default imagecache-lo_mas_leido_54_46_default" 
      title="" alt="" src= 
      "/sites/default/files/imagecache/lo_mas_leido_54_46/comprar_una_planta_3.jpg" /></span> 
      </div> 

      <div class="views-field-title"> 
      <span class="field-content"><a href= 
      "/huerto-urbano/comprar-una-planta">Comprar una planta</a></span> 
      </div> 

      <div class="views-field-teaser"> 
      <span class="field-content">Podemos decidir entre comprar las semillas, la 
      planta joven o la pl&Atilde;&iexcl;ntula (la planta peque&Atilde;&plusmn;a). 
      Para...</span> 
      </div> 

      <div class="views-field-view-node"> 
      <span class="field-content"><a href="/huerto-urbano/comprar-una-planta">Leer 
      m&Atilde;&iexcl;s</a></span> 
      </div> 
     </li> 
     </ul> 
    </div> 

    <div class="item-list"> 
     <h3>Extras</h3> 

     <ul> 
     <li class="views-row views-row-1 views-row-odd views-row-first views-row-last"> 
      <div class="views-field-field-imagen-miniatura-fid"> 
      <span class="field-content"><img height="57" width="67" class= 
      "imagecache imagecache-lo_mas_leido_54_46 imagecache-default imagecache-lo_mas_leido_54_46_default" 
      title="" alt="" src= 
      "/sites/default/files/imagecache/lo_mas_leido_54_46/como_identificar_una_planta_3.jpg" /></span> 
      </div> 

      <div class="views-field-title"> 
      <span class="field-content"><a href= 
      "/huerto-urbano/como-identificar-una-planta">C&Atilde;&sup3;mo identificar 
      una planta</a></span> 
      </div> 

      <div class="views-field-teaser"> 
      <span class="field-content">&Acirc;&iquest;En qu&Atilde;&copy; fijarse para 
      identificar una planta, recordarla o describirla? 
      &Acirc;&iquest;Cu&Atilde;&iexcl;les son...</span> 
      </div> 

      <div class="views-field-view-node"> 
      <span class="field-content"><a href= 
      "/huerto-urbano/como-identificar-una-planta">Leer 
      m&Atilde;&iexcl;s</a></span> 
      </div> 
     </li> 
     </ul> 
    </div> 
    </div> 

はここでjqueryのデモの例です：

は、ここに私のコードです

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 

     <li><a href="#tabs-2">Proin dolor</a></li> 

     <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 

    <div id="tabs-1"> 
     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur 
     nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper 
     ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean 
     tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis 
     orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie 
     erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt 
     interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 

    <div id="tabs-2"> 
     <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut 
     pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, 
     massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut 
     dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit 
     aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. 
     Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. 
     Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus 
     pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel 
     felis. Mauris consectetur tortor et purus.</p> 
    </div> 

    <div id="tabs-3"> 
     <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam 
     vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem 
     eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent 
     per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim 
     commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur 
     lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 

     <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. 
     Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent 
     blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra 
     blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam 
     scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi 
     lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu 
     tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. 
     Vivamus a libero vitae lectus hendrerit hendrerit.</p> 
    </div> 
    </div> 

Answer 1

私の推薦は、より多くの例のようになり、出力を調整することであろう。セマンティクスの観点から見れば、この例のようによりサウンドがよく、フォールバックが改善されています。JavaScriptが機能しなくなった場合、リスト項目はブックマークリンクをコンテンツセクションに提供します。

この動作を確認するには、サンプルページから.tabs（）呼び出しを削除してリンクをクリックします.JavaScriptが動作していない場合は完璧な機能です。