网页内的多层制表符

Question

我有一个关于如何在一个网页中添加标签层的问题。

目前，我要编辑的页面有一个 jQuery 选项卡功能，可以在不同内容的选项卡之间切换。我想更进一步，拥有一个包含初始内容的页面条目选项卡和一个指向下一个选项卡的按钮的包含制表系统；并且在下一个选项卡内具有当前活动的选项卡功能。如果这令人困惑，请查看图片： Image for Visualization 编辑：在图像中，“层”应该是“部分”。

我当前的代码：一层制表符

header.php 中的 jQuery

<script>
  $(function() {

    $('.tab-panels .tabs li').on('click', function(){
      var $panel = $(this).closest('.tab-panels');

      $panel.find('.tabs li.active').removeClass('active');
      $(this).addClass('active');

      // Figure out which panel to show
      var panelToShow = $(this).attr('data-panelid');

      // Hide current panel
      $panel.find('.tab.active').hide(0, showNextPanel);

        // Show next panel
        function showNextPanel() {
          $(this).removeClass('active');

          $('#'+panelToShow).show(0, function() {
            $(this).addClass('active');
          });            
      }
    });
  });
</script> 

标签包含文件

样式为水平条。

<div class="tabs-container">
  <ul class="tabs">
    <li data-panelid="panel1" class="active">Tab 1</li>
    <li data-panelid="panel2">Tab 2</li>            
    <li data-panelid="panel3">Tab 3</li>
    <li data-panelid="panel4">Tab 4</li>
  </ul>
</div>

网页的 HTML

我已将每个包含的选项卡包装为“SECTIONS”，将内部选项卡包装为“TABS”。标头（包含 jQuery）和此页面在另一个 php 文件中调用。

<div class="section-wrap">  

    <div class="container section active" id="section1">
        <div class="row">
            <div class="col-md-12">
                <div>CONTENT</div>
                <div class="button-container">
                    <span>BUTTON TO NEXT SECTION</span>
                </div>
            </div>
        </div>
    </div>  

    <div class="container section" id="section2">

        <div class="container tab-container">

            <!-- Incluce Tabs -->
            <?php include(ROOT_PATH . "/inc/tabs.php") ?>

            <div class="row tab active" id="panel1">
                <div class="col-md-12">
                    <h2>SUBTITLE</h2>
                    <p>CONTENT</p>
                </div>
            </div> 

            <div class="row tab" id="panel2">
                <div class="col-md-12">
                    <h2>SUBTITLE</h2>
                    <ul>
                        <li>CONTENT</li>
                        <li>CONTENT</li>
                        <li>CONTENT</li>
                        <li>CONTENT</li>
                    </ul>
                </div>
            </div>

            <div class="row tab" id="panel3">
                <div class="col-md-12">
                    <h2>SUBTITLE</h2>
                    <h3>SUB SUBTITLE</h3>
                    <p>CONTENT</p>
                    <h3>SUB SUBTITLE</h3>
                    <p>CONTENT</p>
                </div>
            </div>

        </div>

    </div>

</div>                         

<div class="mobile-breadcrumb">         
    <!-- Include Breadcrumb -->
    <?php include(ROOT_PATH . "/inc/breadcrumb.php") ?>
</div>

</div>
<!-- END PAGE CONTENTS -->


<!-- Include Footer -->
<?php include(ROOT_PATH . "/inc/footer.php") ?>

我想可以使用相同的 jQuery 脚本在部分之间切换，但是我不确定如何实现这一点，希望得到一些帮助。用户不需要返回到初始页面条目“部分”。另外，我不希望完全使用不同的网页的原因是该系统将在其上实施的页面已经在网站中深入了 4 层。

我希望这不会太令人困惑，在此先感谢！ :)

Answer 1

绝对不是最好的方法，但这是我目前的解决方案：

标头中的 jQuery

  $(function() {

    $('#section1').show().siblings().hide();

    $('.section-button').find('a').on('click', function(e){
      e.preventDefault();
      $(this.hash).show().siblings().hide();
    })

  });

</script>

页面的 HTML

<div class="section-wrap">  

    <div class="container section" id="section1">
        <div class="row">
            <div class="col-md-12">
                <p>CONTENT</p>
                <p>CONTENT</p>
                <span class="section-button"><a href="#section2">GO TO SECTION 2</a></span>
            </div>
        </div>
    </div>  

    <div class="container section" id="section2">
        <p>CONTENT</p>
        <p>CONTENT</p>
    </div>

</div>