如何使用 JQuery 显示自定义导航选项卡的内容？

Question

I have made custom tabs with a function in JQuery. This is my custom tabs:

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

This is the custom styling I made with the tabs:

.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;
}

And this is my function to activate the tabs (working)

$('.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:
}

When I switch from tab I want to show the content from the class. I have tried with the toggle() function from JQuery. Also I have checked this stackoverflow post:

Bootstrap tab activation with JQuery

This is what I want but it didn't work for my solution because I don't use the nav tabs of bootstrap.

How can I show the content from each nav tab?

Answer 1

To show content you can simply call show() on it. You can also make your logic more DRY and extensible by converting the clickable div elements to a and using the href attribute to target the content to be displayed. This saves you having to write endless if conditions or switch cases, as it will work for an infinite number of tabs. It also means that, if required, you can open tabs when the page loads via the fragment of the URL. Try this:

 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>

Answer 2

hide and show the method can be used for this purpose, Hope this helps

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

Answer 3

You can see my code:

<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: add more some line:

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

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

This is a demo: https://codepen.io/phuongnm153/pen/vYBXBGM

Answer 4

Instead of swith you can use something more responsive like this:

 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>