bootstrap-4 - 用引导程序折叠三列

Question

我正在尝试制作三个具有交叉引用的选项卡，其中一个选项卡当时可见。我正在使用带有 jQ​​uery 支持的功能的 bootstrap v4 折叠方案。这是示例：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>

问题是当我单击选项卡 2、选项卡 1 和选项卡 3 时，我看到两个选项卡同时显示。知道错误来自哪里吗？

标签： bootstrap-4tabscollapse

Answer 1

只需在点击功能上隐藏.collapse和显示标签 ID：

$(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/c​​r6d9L03/3/