Question

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

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/cr6d9L03/3/

使用引导程序折叠三列

1 个答案: