-1

我有一个 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 做到这一点？

谢谢！

4

1 回答 1

2 
<!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-31T12:52:38.547 回答