网页中的多层制表符

Question

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

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

我现在的代码：一层tabination

jQuery 在 header.php

<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'。 header（包含 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 脚本在各个部分之间切换，但是我不确定如何实现它，希望得到一些帮助。用户不需要返回到初始页面条目 'section'。另外，我不希望完全使用不同的网页的原因是，将要实施该系统的页面在网站中已经有4层了。

我希望这不会太混乱，提前致谢！ :)

Answer 1

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

jQuery 在 header

  $(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>

网页中的多层制表符

Multiple layers of tabination within a webpage

html

javascript

php

jquery

tabs