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>

网页中的多个标签层

1 个答案: