Bootstrap 如何使用jQuery显示自定义导航标签的内容？

cwdobuhd 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(5)|浏览(117)

我已经在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:
}

型
当我从选项卡切换时，我想显示类中的内容。我尝试了jQuery中的toggle()函数。我也看了这篇stackoverflow的文章：
Bootstrap tab activation with JQuery
这是我想要的，但它不适用于我的解决方案，因为我不使用 Bootstrap 的导航选项卡。
如何显示每个导航选项卡中的内容？

twitter-bootstrap

来源：https://stackoverflow.com/questions/57552399/how-to-show-the-content-of-a-custom-nav-tab-with-jquery

5条答案

按热度按时间

jtw3ybtb1#

要显示内容，您只需在上面调用show()。您还可以通过将可单击的div元素转换为a并使用href属性来定位要显示的内容，从而使逻辑更加DRY和可扩展。这就省去了编写无休止的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>

赞(0）回复(0）举报 2023-08-01

ct3nt3jp2#

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>

赞(0）回复(0）举报 2023-08-01

kyxcudwk3#

你可以看到我的代码：

<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')
  }
})

型
这是一个demo：https://codepen.io/phuongnm153/pen/vYBXBGM

赞(0）回复(0）举报 2023-08-01

31moq8wy4#

除了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>

赞(0）回复(0）举报 2023-08-01

mfpqipee5#

查看我的此自定义页签视图

$('.nav.nav-tabs li').click(function() { 
        $('.nav.nav-tabs li').removeClass('active');
        $(this).addClass('active');
        $(this).parent('.nav.nav-tabs').next('.tab-content').find('.tab-pane').removeClass('active');
        $($(this).find('a').attr('data-href')).addClass('active');
    });

.nav.nav-tabs{
    display: inline;
}
.nav-tabs > li {
  float: left;
  list-style: none;
}

.nav-tabs > li > a {
  margin-right: 1rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
  line-height: 1.5rem;
  border-bottom: 2px solid transparent;
  color: rgba(0, 0, 0, .87);
  display: inline-block;
  text-decoration: none;
  cursor:pointer;
}

.nav-tabs > .active > a, .nav-tabs > .active > a:focus, .nav-tabs > .active > a:hover {
  color: rgba(0, 0, 0, .87);
  border-bottom-color: rgba(0, 0, 0, .87);
  cursor: default;
}

.tab-content {
  width:100%;
  display:block;
  
}
.tab-content .tab-pane {
  display: none;
  padding: 1rem 0;
}
.tab-content > .tab-pane.active {
  display: block;
}

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs list-unstyled xs-my3">
                                <li class="active"><a data-href="#location-stats" data-toggle="tab">Stats</a></li>
                                <li class=""><a data-href="#location-nearby" data-toggle="tab">Nearby</a></li>
                                <li class=""><a data-href="#location-travel" data-toggle="tab">Commute</a></li>
                                <li class=""><a data-href="#location-schools" data-toggle="tab" class="xs-mr0">Schools</a>                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane xs-relative active" id="location-stats">
                <p>Stats</p>
                                </div>
                <div class="tab-pane xs-relative " id="location-nearby">
                <p>Nearby</p>
                                </div>
                <div class="tab-pane xs-relative " id="location-travel">
                <p>Commute</p>
                                </div>
                <div class="tab-pane xs-relative " id="location-schools">
                <p>Schools</p>
                                </div>
               </div>
               
  </body>
  </html>

赞(0）回复(0）举报 2023-08-01

我来回答

Bootstrap 如何使用jQuery显示自定义导航标签的内容？

5条答案

相关问题

热门标签

最新问答