Свертывание трех столбцов с bootstrap - PullRequest
Новая
       21

Свертывание трех столбцов с bootstrap

0 голосов
/ 15 февраля 2020

Я пытаюсь сделать три вкладки с перекрестными ссылками с одной вкладкой, видимой в то время. Я использовал схему свертывания bootstrap v4 с функциональностью, поддерживаемой jQuery. Вот пример: https://jsfiddle.net/omjvhurd/30/ 

$(document).ready(function() {

  $("#Tab2_t1").click(function() {
		$('#t1').collapse('hide');
		$('#t1').on('hidden.bs.collapse', function () {
			$('#t2').collapse('show');
		});
	})
  
  $("#Tab3_t1").click(function() {
		$('#t1').collapse('hide');
		$('#t1').on('hidden.bs.collapse', function () {
			$('#t3').collapse('show');
		});
	})
  
  $("#Tab1_t2").click(function() {
		$('#t2').collapse('hide');
		$('#t2').on('hidden.bs.collapse', function () {
			$('#t1').collapse('show');
		});
	})
  
  $("#Tab3_t2").click(function() {
		$('#t2').collapse('hide');
		$('#t2').on('hidden.bs.collapse', function () {
			$('#t3').collapse('show');
		});
	})
  
  $("#Tab1_t3").click(function() {
		$('#t3').collapse('hide');
		$('#t3').on('hidden.bs.collapse', function () {
			$('#t1').collapse('show');
		});
	})
  
  $("#Tab2_t3").click(function() {
		$('#t3').collapse('hide');
		$('#t3').on('hidden.bs.collapse', function () {
			$('#t2').collapse('show');
		});
	})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-9 collapse show" id="t1">
      <a href="#" role="button" id="Tab2_t1">Tab 2</a>
      <a href="#" role="button" id="Tab3_t1">Tab 3</a>
    </div>

    <div class="col-sm-9 collapse" id="t2">
      <a href="#" role="button" id="Tab1_t2">Tab 1</a>
      <a href="#" role="button" id="Tab3_t2">Tab 3</a>
    </div>

    <div class="col-sm-9 collapse" id="t3">
      <a href="#" role="button" id="Tab1_t3">Tab 1</a>
      <a href="#" role="button" id="Tab2_t3">Tab 2</a>
    </div>
  </div>
</div>

Проблема в том, что когда я нажимаю Tab 2, Tab 1 и затем Tab 3, я вижу две вкладки, отображаемые одновременно. Есть идеи, откуда возникла ошибка?

1 Ответ

0 голосов
/ 17 февраля 2020

Просто скройте .collapse и покажите идентификатор вкладки для ваших функций нажатия: 

$(document).ready(function() {

  $("#Tab2_t1").click(function() {
        $('.collapse').collapse('hide');
        $('#t2').collapse('show');
    })

  $("#Tab3_t1").click(function() {
        $('.collapse').collapse('hide');
        $('#t3').collapse('show');
    })

  $("#Tab1_t2").click(function() {
        $('.collapse').collapse('hide');
        $('#t1').collapse('show');
    })

  $("#Tab3_t2").click(function() {
        $('.collapse').collapse('hide');
        $('#t3').collapse('show');
    })

  $("#Tab1_t3").click(function() {
        $('.collapse').collapse('hide');
        $('#t1').collapse('show');
    })

  $("#Tab2_t3").click(function() {
        $('.collapse').collapse('hide');
        $('#t2').collapse('show');
    })
});

Вот скрипка: https://jsfiddle.net/Maro94/cr6d9L03/3/

...