Вкладки jQuery: создание вкладок из форматов div и li не является примером

Question

Я пытаюсь создать несколько вкладок с помощью Jquery , J * запроса пользовательского интерфейса вкладок *, из этого формата, который Drupal выводит меня ...

У меня есть несколько опций для вывода, но это тот, который я выбрал, однако NONE не похож на тот, что приведен в примере, приведенном на демонстрационной странице ... Может быть, я могу использовать методы из вкладок пользовательского интерфейса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.