Início / coding / Perguntas / 79592861
Accepted
riospereira
Asked: 2025-04-25 23:32:44 +0800 CST

Aplicar a mesma função a várias seções

  • 772

Como posso aplicar a mesma função abaixo às outras duas seções da div? Gostaria que os botões primários uke intem cada div mostrassem/ocultassem o conteúdo dentro de suas seções filhas. Outro problema é que estou usando abas. Cada div está hospedada em uma aba diferente, então a classe ativa clicada precisa permanecer na alternância de abas.

$('.uk').on("click", function() {
  $('#div-ONE-INT').hide();
  $('#div-ONE-UK').show();
  $(this).addClass('active');
  $('.int').removeClass('active');
  return false;
});

$('.int').on("click", function() {
  $('#div-ONE-INT').show();
  $('#div-ONE-UK').hide();
  $(this).addClass('active');
  $('.uk').removeClass('active');
  return false;
});

$('#div-ONE-INT').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="ONE">
  <a href="#" class="primary-btn active uk">UK</a>
  <a href="#" class="primary-btn int">International</a>

  <section id="div-ONE-UK">
    <!-- UK ONE content -->
  </section>

  <section id="div-ONE-INT">
    <!-- Int ONE content -->
  </section>
</div>

<div class="TWO">
  <a href="#" class="primary-btn uk active">UK</a>
  <a href="#" class="primary-btn int">International</a>

  <section id="div-TWO-UK">
    <!-- UK TWO content -->
  </section>

  <section id="div-TWO-INT">
    <!-- Int TWO content -->
  </section>
</div>

<div class="THREE">
  <a href="#" class="primary-btn uk active">UK</a>
  <a href="#" class="primary-btn int">International</a>

  <section id="div-THREE-UK">
    <!-- UK THREE content -->
  </section>

  <section id="div-THREE-INT">
    <!-- Int THREE content -->
  </section>
</div>

html

1 respostas

  1. Best Answer

    Use $(this).closest("div")para obter a div que a contém. Em seguida, você pode usar seletores relativos a ela para selecionar os elementos na mesma aba.

    $('.uk').on("click", function() {
  let container = $(this).closest("div");
  container.find(".int-section").hide();
  container.find(".uk-section").show();
  $(this).addClass('active');
  container.find('.int').removeClass('active');
  return false;
});

$('.int').on("click", function() {
  let container = $(this).closest("div");
  container.find(".uk-section").hide();
  container.find(".int-section").show();
  $(this).addClass('active');
  container.find('.uk').removeClass('active');
  return false;
});

$('#div-ONE-INT').hide();
    .primary-btn.active {
  color: blue;
}

.primary-btn {
  color: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="ONE">
  <a href="#" class="primary-btn active uk">UK</a>
  <a href="#" class="primary-btn int">International</a>

  <section id="div-ONE-UK" class="uk-section">
    <!-- UK ONE content -->
  </section>

  <section id="div-ONE-INT" class="int-section">
    <!-- Int ONE content -->
  </section>
</div>

<div class="TWO">
  <a href="#" class="primary-btn uk active">UK</a>
  <a href="#" class="primary-btn int">International</a>

  <section id="div-TWO-UK" class="uk-section">
    <!-- UK TWO content -->
  </section>

  <section id="div-TWO-INT" class="int-section">
    <!-- Int TWO content -->
  </section>
</div>

<div class="THREE">
  <a href="#" class="primary-btn uk active">UK</a>
  <a href="#" class="primary-btn int">International</a>

  <section id="div-THREE-UK" class="uk-section">
    <!-- UK THREE content -->
  </section>

  <section id="div-THREE-INT" class="int-section">
    <!-- Int THREE content -->
  </section>
</div>

    • 1

relate perguntas