使用引导程序折叠三列

时间:2020-02-15 09:43:11

标签: bootstrap-4 tabs collapse

我正在尝试使三个带有交叉引用的标签同时显示一个标签。我使用的是带有jQuery支持功能的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时,我看到同时显示两个选项卡。知道错误来自哪里吗?

1 个答案:

答案 0 :(得分:0)

只需隐藏.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/cr6d9L03/3/