Показывать динамический c контент на основе нажатой вкладки

Question

Я пытаюсь динамически отображать содержимое для определенной вкладки.

Если щелкнуть определенную вкладку навигации, она должна отобразить соответствующее содержимое справа. информацию о вкладке вместе. Есть ли способ справиться с этим с помощью jquery / js.

Tab:

<div class="ibm-tab-section">
            <ul class="ibm-tabs" role="tablist">
                <li><a aria-selected="true" role="tab" href="#example2b-tab1">Example 2b Tab 1</a></li>
                <li><a role="tab" href="#example2b-tab2">Example 2b Tab 2</a></li>
                <li><a role="tab" href="#example2b-tab3">Example 2b Tab 3</a></li>
                <li><a role="tab" href="#example2b-tab4">Example 2b Tab 4</a></li>
            </ul>
        </div>

Содержимое вкладки 1:

    <div id="example2b-tab1" class="ibm-tabs-content">
            <p>Example 2b Tab 1 contents</p>
        </div>

Содержимое вкладки 2:

<div id="example2b-tab2" class="ibm-tabs-content">
            <p>Example 2b Tab 2 contents</p>
            <form>
                <p>
                    <select>
                        <option value="">Select one</option>
                        <option value="1">Mr.</option>
                        <option value="1">Mrs.</option>
                        <option value="1">Dude</option>
                    </select>
                </p>
            </form>
        </div>

Answer 1

• Скрыть все элементы .ibm-tabs-content с помощью CSS
• При щелчке по элементу a скрыть элемент .ibm-tabs-content и отобразить соответствующий элемент содержимого на основе href сопоставленный атрибут.

$(function() {
    $("#example2b-tab1").show();
});
$('.ibm-tabs li a').on('click', function(e) {
  e.preventDefault();
  $('.ibm-tabs-content').hide();
  let IDSelector = $(this).attr('href');
  $(IDSelector).show();
})

.ibm-tabs-content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ibm-tab-section">
  <ul class="ibm-tabs" role="tablist">
    <li><a aria-selected="true" role="tab" href="#example2b-tab1">Example 2b Tab 1</a></li>
    <li><a role="tab" href="#example2b-tab2">Example 2b Tab 2</a></li>
    <li><a role="tab" href="#example2b-tab3">Example 2b Tab 3</a></li>
    <li><a role="tab" href="#example2b-tab4">Example 2b Tab 4</a></li>
  </ul>
</div>


<div id="example2b-tab1" class="ibm-tabs-content">
  <p>Example 2b Tab 1 contents</p>
</div>


<div id="example2b-tab2" class="ibm-tabs-content">
  <p>Example 2b Tab 2 contents</p>
  <form>
    <p>
      <select>
        <option value="">Select one</option>
        <option value="1">Mr.</option>
        <option value="1">Mrs.</option>
        <option value="1">Dude</option>
      </select>
    </p>
  </form>
</div>

Answer 2

Вы можете скрывать и отображать содержимое разных вкладок, щелкая по вкладкам, используя jquery и javascript, используя свойство стиля отображения и делая его как none.