jQuery onclick显示/隐藏多个div

Question

我正在尝试学习一些jQuery并且看起来我没有从我的上一个问题和我得到的答案中学到任何东西,因为我无法弄清楚如何执行以下操作:

https://jsfiddle.net/9eofcw7w/

是的,它正在工作,但像这样的代码只是草率而且不专业:

$('#tab1').click(function () {
$('#tab2show').hide();
$('#tab3show').hide();
$('#tab4show').hide();
$('#tab5show').hide();

$('#tab1show').show();
});

我将如何使用几行jQuery而不是现在的东西来制作上述代码？

Answer 1

您的代码的问题是您为每个元素重复相同的代码块,而是可以使用一些常见属性来减少单独的处理程序,如

首先,我们为所有选项卡元素添加一个公共类tab,然后将另一个类tab-content添加到所有内容元素,这将有助于我们轻松地选择这些元素.

然后我们正在寻找的逻辑是,我们只需要显示content其id与被点击的标签匹配的内容(内容的id是<clicked tab id> + 'show').

现在我们可以有一个单击处理程序,它将定位所有tab元素,我们在其中连接其id 'show'以查找要显示的内容并显示它,.show()然后我们隐藏所有其他tab-content元素.

另请注意,我们可以缓存jQuery对象以tab-content供以后使用.

var $contents = $('.tab-content');
$contents.slice(1).hide();
$('.tab').click(function() {
  var $target = $('#' + this.id + 'show').show();
  $contents.not($target).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tab1" class="tab">Test 1</div>
<div id="tab2" class="tab">Test 2</div>
<div id="tab3" class="tab">Test 3</div>
<div id="tab4" class="tab">Test 4</div>
<div id="tab5" class="tab">Test 5</div>

<br />
<br />

<div id="tab1show" class="tab-content">
  test 1 default = show
</div>

<div id="tab2show" class="tab-content">
  test 2
</div>

<div id="tab3show" class="tab-content">
  test 3
</div>

<div id="tab4show" class="tab-content">
  test 4
</div>

<div id="tab5show" class="tab-content">
  test 5
</div>