2

我在 JQuery 中使用函数制作了自定义选项卡。这是我的自定义标签：

<div class="row">
    <div class="col-4 master-advanced-left-tab master-advanced-left-tab-active">
        <p>Item 1</p>
    </div>
    <div class="col-4 master-advanced-left-tab">
        <p>Item 2</p>
    </div>
    <div class="col-4 master-advanced-left-tab">
        <p>Item 3</p>
    </div>
</div>

<div class="item1">
    Show content from item 1
</div>
<div class="item2">
    Show content from item 2
</div>
<div class="item3">
    Show content from item 3
</div>

这是我使用选项卡制作的自定义样式：

.master-advanced-left-tab {
    overflow: hidden;
    cursor: pointer;
    padding-bottom: 10px;
    padding-top: 10px;
}

.master-advanced-left-tab > p {
    text-overflow: ellipsis;
    height: 20px;
}

.master-advanced-left-tab-active {
    color: #1C72DF;
    border-bottom: 3px #1C72DF solid;
}

这是我激活标签的功能（工作）

$('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
elem.addClass('master-advanced-left-tab-active');
switch (elem.data('id')) {
    case 'item1':
        //show div for item1
        break;
    case 'item2':
        //show div for item2
        break;
    default:
}

当我从选项卡切换时，我想显示课程中的内容。我已经尝试过使用toggle()JQuery 的功能。我也检查了这个stackoverflow帖子：

使用 JQuery 激活引导选项卡

这就是我想要的，但它不适用于我的解决方案，因为我不使用引导程序的导航选项卡。

如何显示每个导航选项卡的内容？

4

4 回答 4

1

要显示内容，您只需调用show()它即可。您还可以通过将可点击div元素转换为a并使用href属性来定位要显示的内容，从而使您的逻辑更加干燥和可扩展。这使您不必编写无穷无尽的if条件或switch案例，因为它适用于无限数量的选项卡。这也意味着，如果需要，您可以在页面加载时通过 URL 的片段打开选项卡。试试这个：

let $tabs = $('.tab-content');
let $triggers = $('.master-advanced-left-tab').on('click', function(e) {
  e.preventDefault();
  $triggers.removeClass('master-advanced-left-tab-active'); 
  var $elem = $(this).addClass('master-advanced-left-tab-active');
  
  $tabs.hide();
  $tabs.filter($elem.attr('href')).show();  
});

$triggers.first().trigger('click');
.master-advanced-left-tab {
  display: block;
  overflow: hidden;
  cursor: pointer;
  padding-bottom: 10px;
  padding-top: 10px;
}

.master-advanced-left-tab>p {
  text-overflow: ellipsis;
  height: 20px;
}

.master-advanced-left-tab-active {
  color: #1C72DF;
  border-bottom: 3px #1C72DF solid;
}

.tab-content {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <a href="#item1" class="col-4 master-advanced-left-tab">
    <p>Item 1</p>
  </a>
  <a href="#item2" class="col-4 master-advanced-left-tab">
    <p>Item 2</p>
  </a>
  <a href="#item3" class="col-4 master-advanced-left-tab">
    <p>Item 3</p>
  </a>
</div>
<div class="tab-content" id="item1">
  Show content from item 1
</div>
<div class="tab-content" id="item2">
  Show content from item 2
</div>
<div class="tab-content" id="item3">
  Show content from item 3
</div>

于 2019-08-19T07:56:03.763 回答
0

hide并且show该方法可以用于此目的，希望这会有所帮助 

$('.master-advanced-left-tab').click(function(e){
 
    $(this).addClass('master-advanced-left-tab-active').siblings().removeClass('master-advanced-left-tab-active')

   var class1 = $(this).attr('data-id')
    $('.'+class1+'').removeClass('hide').siblings().addClass('hide')

})
.master-advanced-left-tab {
            overflow: hidden;
            cursor: pointer;
            padding-bottom: 10px;
            padding-top: 10px;
        }

            .master-advanced-left-tab > p {
                text-overflow: ellipsis;
                height: 20px;
            }

        .master-advanced-left-tab-active {
            color: #1C72DF;
            border-bottom: 3px #1C72DF solid;
        }
        .hide
        {
        display:none;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="row">
    <div class="col-4 master-advanced-left-tab master-advanced-left-tab-active" data-id="item1">
        <p>Item 1</p>
    </div>
    <div class="col-4 master-advanced-left-tab" data-id="item2">
        <p>Item 2</p>
    </div>
    <div class="col-4 master-advanced-left-tab" data-id="item3">
        <p>Item 3</p>
    </div>
</div>
<div class="wrap">
<div class="item1  ">
    Show content from item 1
</div>
<div class="item2 hide">
    Show content from item 2
</div>
<div class="item3 hide">
    Show content from item 3
</div>
</div>

于 2019-08-19T07:57:09.767 回答
0

你可以看到我的代码：

<div class="row">
  <div class="col-4 master-advanced-left-tab master-advanced-left-tab-active" data-id="item1">
    <p>Item 1</p>
  </div>
  <div class="col-4 master-advanced-left-tab" data-id="item2">
    <p>Item 2</p>
  </div>
  <div class="col-4 master-advanced-left-tab" data-id="item3">
    <p>Item 3</p>
  </div>
</div>

<div class="content-item item1 active">
    Show content from item 1
</div>
<div class="content-item item2">
    Show content from item 2
</div>
<div class="content-item item3">
    Show content from item 3
</div>

Css：添加更多行：

.content-item  {  
   display: none
}
.content-item.active  {
   display: block
}

然后JS：

$('.master-advanced-left-tab').click(function (){
  let elem = $(this);
  $('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
  $('.content-item').removeClass('active');
  elem.addClass('master-advanced-left-tab-active');
  switch (elem.data('id')) {
      case 'item1':
        $('.item1').addClass('active')
        break;
      case 'item2':
        $('.item2').addClass('active')
        break;
      default:
        $('.item3').addClass('active')
  }
})

这是一个演示：https ://codepen.io/phuongnm153/pen/vYBXBGM

于 2019-08-19T07:57:30.850 回答
0

代替 swith 你可以使用像这样响应更快的东西：

function changeTab(element) {
  // remove 'active' class from item and tab to prevent multiple
  // tab selection
  $('.master-advanced-left-tab').removeClass('active');
  $('.tab').removeClass('active');
  
  // add class 'active' to clicked item and proper tab
  // tab class is taken from 'data-tab' property from item in html
  $(element).addClass('active');
  $('.tab.' + $(element).data('tab')).addClass('active');
}

// change tab to first at init to prevent none tab selected
// You can replace this by adding class 'active' to
// 'master-advanced-left-tab' and 'tab' item in html
changeTab( $('.master-advanced-left-tab:first-child') );

// not much to explain
$('.master-advanced-left-tab').on('click', function(){
  changeTab(this);
})
.master-advanced-left-tab {
  overflow: hidden;
  cursor: pointer;
  padding-bottom: 10px;
  padding-top: 10px;
}

.master-advanced-left-tab > p {
  text-overflow: ellipsis;
  height: 20px;
}

/* changed from .master-advanced-left-tab-active to shorten code */
.master-advanced-left-tab.active {
  color: #1C72DF;
  border-bottom: 3px #1C72DF solid;
}

.tab {
  height: 0;
  overflow:hidden;
}

.tab.active {
  height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <!--  property 'data-tab' for js function to select proper tab  -->
  <div data-tab="item1" class="col-4 master-advanced-left-tab">
    <p>Item 1</p>
  </div>
  <div data-tab="item2" class="col-4 master-advanced-left-tab">
    <p>Item 2</p>
  </div>
  <div data-tab="item3" class="col-4 master-advanced-left-tab">
    <p>Item 3</p>
  </div>
</div>

<div class="tab item1">
  Show content from item 1
</div>
<div class="tab item2">
  Show content from item 2
</div>
<div class="tab item3">
  Show content from item 3
</div>

于 2019-08-19T08:13:47.110 回答