列表Html的標籤

-1

我有一個HTML內容列表，並希望呈現爲標籤。我的代碼：列表Html的標籤

<div class="itemExtraFields"> 
<ul id="conteudo"> 
     <li class="even typeTextarea group1"> 
      <span class="itemExtraFieldsLabel">Contéudo:</span> 
      <span class="itemExtraFieldsValue"><p>teste</p></span> 
     </li> 
     <li class="odd typeTextarea group1"> 
      <span class="itemExtraFieldsLabel">Público-alvo:</span> 
      <span class="itemExtraFieldsValue"><p>teste</p></span> 
     </li> 
     <li class="even typeTextarea group1"> 
      <span class="itemExtraFieldsLabel">Tutor:</span> 
      <span class="itemExtraFieldsValue"><p>teste</p></span> 
     </li> 
     <li class="odd typeTextarea group1"> 
      <span class="itemExtraFieldsLabel">Diferenciais:</span> 
      <span class="itemExtraFieldsValue"><p>teste</p></span> 
     </li> 
     <li class="even typeTextarea group1"> 
      <span class="itemExtraFieldsLabel">Depoimentos:</span> 
      <span class="itemExtraFieldsValue"><p>teste</p></span> 
     </li> 
    </ul> 
</div>

我希望類「itemExtraFieldsLabel」顯示爲選項卡的標題和類「itemExtraFieldsValue」是內容。我怎麼能使用jQuery或只是普通的JavaScript？

謝謝！

來源

2013-10-31 Marcello Infoweb

使用http://jqueryui.com/tabs/ –

HTML是由Joomla 3創建的，我不必區分類。 –

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <style type="text/css"> 

     .itemExtraFields { 
      margin: 10px; 
     } 

     .itemExtraFields ul { 
      margin: 0; 
      padding: 0; 
     } 

     .itemExtraFields li { 
      display: inline-block; 
      border: 1px solid #CCC; 
      border-width: 1px 1px 0 1px; 
      border-radius: 3px 3px 0 0; 
      padding: 5px 15px; 
      cursor: pointer; 
      background: #CCC; 
     } 

     .itemExtraFieldsValue { 
      display: none; 
     } 

     .container { 
      border-top: 1px solid #333; 
     } 

     .active { 
      background: #FFF !important; 
     } 

    </style> 
</head> 
<body> 
    <div class="itemExtraFields"> 
<ul id="conteudo"> 
     <li class="even typeTextarea group1"> 
      <span class="itemExtraFieldsLabel">Contéudo:</span> 
      <span class="itemExtraFieldsValue"><p>teste1</p></span> 
     </li> 
     <li class="odd typeTextarea group1"> 
      <span class="itemExtraFieldsLabel">Público-alvo:</span> 
      <span class="itemExtraFieldsValue"><p>teste2</p></span> 
     </li> 
     <li class="even typeTextarea group1"> 
      <span class="itemExtraFieldsLabel">Tutor:</span> 
      <span class="itemExtraFieldsValue"><p>teste3</p></span> 
     </li> 
     <li class="odd typeTextarea group1"> 
      <span class="itemExtraFieldsLabel">Diferenciais:</span> 
      <span class="itemExtraFieldsValue"><p>teste4</p></span> 
     </li> 
     <li class="even typeTextarea group1"> 
      <span class="itemExtraFieldsLabel">Depoimentos:</span> 
      <span class="itemExtraFieldsValue"><p>teste5</p></span> 
     </li> 
    </ul> 
</div> 

    <script type="text/javascript"> 
     $('.itemExtraFields').append('<div class="container"></div>'); 
     var arrContent = $('.itemExtraFieldsValue:first');  
     $('.container').html($(arrContent[0]).html()); 
     $('.itemExtraFields ul li:first').addClass('active'); 

     $('.itemExtraFields ul li').click(function() { 
      $('.container').html($(this).find('.itemExtraFieldsValue').html()); 
      $('.itemExtraFields ul li').removeClass('active'); 
      $(this).addClass('active'); 
     }); 

    </script> 
</body> 
</html>

來源

2013-10-31 12:52:38

Obrigado，我ajudou muito！ –

列表Html的標籤

回答

相關問題