前端之家

  1. 首页
  2. 问答

将特定标签的内容显示为其子元素

• 问答

我有一个选项卡列表，可以是一个类别。该特定标签或类别的内容应显示在其相应标签的附近，并在底部稍稍显示一些，以便使父母和孩子看起来像个

。

这是我的工作方式

<div id="teams" class="tabbable tabs-left">
    <div class="container">
        <div class="row">
            <nav class="nav flex-column col-md-1 teamTab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" href="#category1-tab" data-toggle="pill" role="tab">Category1</a>
                <a class="nav-link" href="#category2-tab" data-toggle="pill" role="tab">Category2</a>
                <a class="nav-link" href="#category3-tab" data-toggle="pill" role="tab">Category3</a>
            </nav>
            <div class="tab-content col-md-11">
                <div class="tab-pane active" id="category1-tab" style="padding-left: 60px; padding-right:100px">
                    <h5 class="card-title">Name</h5>
                    <p class="card-title">position</p>
                </div>
                <div class="tab-pane" id="category2-tab">
                    <h5 class="card-title">Category 2 Name</h5>
                    <p class="card-title">position</p>
                </div>
                <div class="tab-pane" id="category3-tab">
                    <h5 class="card-title">Category 3 Name</h5>
                    <p class="card-title">position</p>
                </div>
            </div>
        </div>
    </div>
</div>

当前，所有选项卡的内容都显示在同一位置。但是，我希望将内容显示在其相应选项卡的旁边（稍稍位于底部）。

-类别1 

           name position

类别2 

          category 2 name position if clicked this one show in this 
          position

Category3 

          similarly if clicked here should be shown its related content 
          here not on the top
mjguo8888 回答：将特定标签的内容显示为其子元素

请尝试以下解决方案： 将.child类添加到所有具有类.tab-pane的内容DIV中，并删除内联样式。

.child {
  padding-left: 60px; 
  padding-right:100px
}

然后使用此JS代码在Tab标题下方显示Tab内容。

$(document).ready(function() {
   $('.nav-link').each(function(){
      var content_id = $(this).attr('href');
      $(this).after($(content_id).hide());
      if($(this).hasClass('active')) {
         $(content_id).show();
      }
   });

    $('.nav-link').on('click',function(){
        var content_id = $(this).attr('href');
        $('.tab-pane').hide();
        $(content_id).show();
    });
});

希望它会为您工作。或检查工作code here

bootstrap-4csshtmltwitter-bootstrap
本文链接：https://www.f2er.com/3162791.html

大家都在问