javascript - 选项卡中的选项卡

Question

我进行了搜索，但完全迷失在网络开发中，找不到专门针对我的案例的答案。

请查看this jsFiddle .我有一组较大的选项卡，然后是员工中的一组子选项卡，每个员工都有一个简历；截至目前，子选项卡的 onclick 已链接到较大选项卡的选项卡内容。我已经尝试为子选项卡相应地更改内容#tabs/id，但是子选项卡折叠并且在单击每个员工时不支持；以我有限的知识，经历了许多试验和错误，但没有运气。非常感谢任何评论。

这是 html:

 <script type="text/javascript">
    // <![CDATA[
    function tab(tab) {
        document.getElementById('tab1').style.display = 'none';
        document.getElementById('tab2').style.display = 'none';
        document.getElementById('tab3').style.display = 'none';
        document.getElementById('tab4').style.display = 'none';
        document.getElementById('tab5').style.display = 'none';
        document.getElementById('tab6').style.display = 'none';
        document.getElementById('li_tab1').setAttribute("class", "");
        document.getElementById('li_tab2').setAttribute("class", "");
        document.getElementById('li_tab3').setAttribute("class", "");
        document.getElementById('li_tab4').setAttribute("class", "");
        document.getElementById('li_tab5').setAttribute("class", "");
        document.getElementById('li_tab6').setAttribute("class", "");
        document.getElementById(tab).style.display = 'block';
        document.getElementById('li_' + tab).setAttribute("class", "active");
    }
    // ]]>
    </script>
    <div id="tabs">
    <ul>
        <li id="li_tab1" onclick="tab('tab1')"><a>School Sites</a>

        </li>
        <li id="li_tab2" onclick="tab('tab2')"><a>21st</a>

        </li>
        <li id="li_tab3" onclick="tab('tab3')"><a>Project Leadership</a>

        </li>
        <li id="li_tab4" onclick="tab('tab4')"><a>Site</a>

        </li>
        <li id="li_tab5" onclick="tab('tab5')"><a>Collaborative</a>

        </li>
        <li id="li_tab6" onclick="tab('tab6')"><a>Staff</a>

        </li>
    </ul>
    <div id="Content_Area">
            <div id="tab1">School site info</div>

        <div id="tab2" style="display: none;">21st</div>

        <div id="tab3" style="display: none;">Project Leadership info</div>

        <div id="tab4" style="display: none;">Site info</div>

        <div id="tab5" style="display: none;">Collaborative info</div>

        <div id="tab6" style="display: none;">
            <div id="tabs">
                <ul>
                    <li id="li_tab1" onclick="tab('tab1')" style="align: center; background-color: #007c8c; width: 150px; padding-left: 10px;">
<a><img title="GH" alt="" style="align: center; padding-top: 10px;" src=".jpg" /></a>

                    </li>
                    <li id="li_tab2" onclick="tab('tab2')" style="align: center; background-color: #007c8c; width: 150px; padding-left: 10px;">
<a><img title="AH" alt="" style="align: center; padding-top: 10px;" src=".jpg" /></a>

                    </li>
                    <li id="li_tab3" onclick="tab('tab3')" style="align: center; background-color: #007c8c; width: 150px; padding-left: 10px;">
<a><img title="JR" alt="" style="align: center; padding-top: 10px;" src=".jpg" /></a>

                    </li>
                    <li id="li_tab4" onclick="tab('tab4')" style="align: center; background-color: #007c8c; width: 150px; padding-left: 10px;">
<a><img title="LK" alt="" style="align: center; padding-top: 10px;" src="jpg" /></a>

                    </li>
                </ul>
                <table style="width: 642px; border-color: white; padding-left: 10px; margin-left: 9px;">
                    <tbody>
                        <tr style="align: center; background-color: #ebd000;">
                            <td style="align: center; width: 150px; border-color: white;"><span style="color: #007c8c; font-size: 10pt; font-weight: bold; line-height: 50%;">Professor</span>

<span style="color: #007c8c; font-size: 10pt; line-height: 50%;">Principal Investigator</span>

                            </td>
                            <td style="align: center; width: 150px; border-color: white;"><span style="color: #007c8c; font-size: 10pt; font-weight: bold; line-height: 50%;">AH</span>

<span style="color: #007c8c; font-size: 10pt; line-height: 50%;">Program Administrator</span>

                            </td>
                            <td style="align: center; width: 150px; border-color: white;"><span style="color: #007c8c; font-size: 10pt; font-weight: bold; line-height: 50%;">JR</span>

<span style="color: #007c8c; font-size: 10pt; line-height: 50%;">Program Administrator</span>

                            </td>
                            <td style="align: center; width: 150px; border-color: white;"><span style="color: #007c8c; font-size: 10pt; font-weight: bold; line-height: 50%;">LK</span>

<span style="color: #007c8c; font-size: 10pt; line-height: 50%;">Teacher Special Programs</span>

                            </td>
                        </tr>
                    </tbody>
                </table>
                <div id="Content_Area">
                    <!------------------------------------------------------- Sub-Tab 1 ------------------------------------------------------->
                    <div id="tab1" style="display: none;">Prof info</div>
                    <!------------------------------------------------------- Sub-Tab 2 ------------------------------------------------------->
                    <div id="tab2" style="display: none;">AH info</div>
                    <!------------------------------------------------------- Sub-Tab 3 ------------------------------------------------------->
                    <div id="tab3" style="display: none;">jr info</div>
                     <!------------------------------------------------------ Sub-Tab 4 ------------------------------------------------------->
                    <div id="tab4" style="display: none;">lk info</div>
                </div>
            </div>
        </div>
    </div>
</div>

这是CSS:

#tabs ul {
    padding: 0px;
    margin: 0px;
    margin-left: 10px;
    list-style-type: none;
}
#tabs ul li {
    display: inline-block;
    clear: none;
    float: left;
    height: 24x;
}
#tabs ul li a {
    position: relative;
    margin-top: 0px;
    display: block;
    margin-left: 1px;
    margin-bottom: 1px;
    line-height: 50px;
    padding-left: 0px;
    background: #007c8c;
    z-index: 9999;
    border: none;
    border-bottom: 0px;
    /*-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;*/
    width: 140px;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
}
#tabs ul li a:hover {
    top: -5px;
    background: #ebd000;
    !important;
}
#tabs #Content_Area {
    padding: 0 10px;
    clear:both;
    overflow:hidden;
    line-height:19px;
    position: relative;
    top: 20px;
    z-index: 5;
    height: relative;
    overflow: hidden;
    padding-bottom: 20px;
}
p {
    padding-left: 15px;
}

Answer 1

在下面使用我认为它会对你有帮助

在这里工作http://jsfiddle.net/f8UyH/

$(document).ready(function() {
  $('.Content_Area').children('div').addClass('tabPane');
  $('.Content_Area .tabPane:not(":first")').hide();
  $('#tabs li:first-child a').addClass('active');
  $('#tabs ul a').click(function(e) {
    e.preventDefault();
    $(this).parent('li').siblings().children('a').removeClass('active');
    $(this).addClass('active');
    var $target = $(this).attr('href');
    $($target).show().siblings().hide();
    if ($($target).has('div#tabs').length == true) {
      $($target).addClass('subTabs');
      $('.subTabs').find('.tabPane:first').show();
      $('.subTabs').children('#tabs').find('li a').removeClass('active');
      $('.subTabs').children('#tabs').find('li:first-child a').addClass('active');
    }
  });
});

您需要对 HTML 和 CSS 做一些小的更改，它会很好地工作。

可以在fiddle中看到变化。