jQuery点击显示/隐藏多个div

Question

我正在尝试学习一些jQuery知识，但显然我从上次提出的问题和得到的答案中没有学到任何东西，因为我无法弄清楚如何做到以下几点：

https://jsfiddle.net/9eofcw7w/

是的，它可以运行，但像这样的代码只是粗糙的，不是专业的:

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

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

如何用几行jQuery代码代替我现在的代码？

- Hardist

---

可能是使用Jquery显示/隐藏多个Div的重复问题。 - omukiguy

Answer 1

您的代码问题是，在每个元素中重复相同的代码块，而不是使用一些共同的属性来减少单独的处理程序，例如：

首先，我们将一个公共类添加到所有选项卡元素中，如tab，然后将另一个类tab-content添加到所有内容元素中，这将帮助我们轻松选择这些元素。

然后，我们需要的逻辑是仅显示与所点击选项卡的id匹配的content（内容的id为<clicked tab id> + 'show'）。

现在，我们可以拥有一个单击处理程序，它将针对所有tab元素，其中我们将其ID与'show'连接起来以查找要显示的内容，并通过.show()显示它，然后隐藏所有其他tab-content元素。

还请注意，我们可以缓存tab-content的jQuery对象以供以后使用。

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>

- Arun P Johny

---

谢谢你的解释。虽然我知道重复代码不好（这也是我在这里提问的原因），但阅读解释而不仅仅是看到一些代码也是很好的。感谢你，我又学到了新东西 :) - Hardist

你的函数没有阻止默认操作，我在后面发布了一个JS代码。 - nouman arshad

Answer 2

对于上述所有答案，我遇到了页面重新加载的问题，因此请使用那个jQuery代码来防止默认行为和页面加载。

<script>
var $contents = $('.tab-content');
$contents.slice(1).hide();
$('.tab').click(function (event, ui) {
    var $target = $('#' + this.id + 'show').show();
    $contents.not($target).hide();
    event.preventDefault();
    return false;  
});

- nouman arshad

Answer 3

这里有一种方法可以采用：

首先在您要点击的div上添加一个包装div。这样做可以更轻松地添加事件处理程序：

<div id="clicks">
    <div id="tab1">Test 1</div>
    <div id="tab2">Test 2</div>
    <div id="tab3">Test 3</div>
    <div id="tab4">Test 4</div>
    <div id="tab5">Test 5</div>
</div>

然后将您要显示/隐藏的所有div都包装在另一个div中。这将使显示/隐藏所有div更容易：

<div id="tabShows">
    <div id="tab1show">test 1 default = show</div>
    <div id="tab2show">test 2</div>
    <div id="tab3show">test 3</div>
    <div id="tab4show">test 4</div>
    <div id="tab5show">test 5</div>
</div>

然后使用这个事件处理程序：

// when user click on any div inside div 'clicks'
$('#clicks').on('click', 'div', function(event){

    // Get the id of a div that was clicked, e.g. tab1
    var tabId = $(this).attr('id');

    // Hide all divs inside div 'tabShows'
    $('#tabShows div').hide();

    // Show only div that was clicked, e.g. tab1show
    $('#' + tabId + 'show').show();
});

这是更新后的链接 jsFiddle。保留了HTML，未进行解释。

- dotnetom

Answer 4

<div id="tab1" class="ta">Test 1</div>
<div id="tab2" class="ta">Test 2</div>
<div id="tab3" class="ta">Test 3</div>
<div id="tab4" class="ta">Test 4</div>
<div id="tab5" class="ta">Test 5</div>

<br /><br />

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

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

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

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

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

 $('#tab2show').hide();
 $('#tab3show').hide();
 $('#tab4show').hide();
 $('#tab5show').hide();

$('.ta').click(function () {
    $('.tab').hide();
    $("#"+$(this).attr("id")+"show").show();
});

JSFiddle

的英译中文是：

{{链接1：JSFiddle}}

。

- Vishnu