Question

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

是的，它正在运行，但像这样的代码只是草率而且不专业：

sqlplus -s / <<SQL
set feedback off
set linesize 100
set lines 150
set pages 0
set head off
set serveroutput on size 10000

select 1 from dual;
SQL

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

Answer 1

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

首先，我们为tab等所有标签元素添加一个公共类，然后将另一个类tab-content添加到所有内容元素中，这将有助于我们轻松选择这些元素。

然后我们正在寻找的逻辑是，我们只需要显示其id与所点击的标签匹配的content（内容的ID为<clicked tab id> + 'show'）。

现在我们可以使用单击处理程序来定位所有tab元素，在其中我们将其ID与'show'连接起来，以查找要显示的内容并通过{{1}显示它然后我们隐藏所有其他.show()元素。

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

＆＃13;

tab-content

＆＃13;

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

＆＃13;

Answer 2

您可以采取以下一种方法：

首先在您单击的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

的链接

Answer 3

<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

Answer 4

对于所有上述答案页面重新加载发生，我正面临使用这些答案，所以请使用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;  
});

jQuery onclick显示/隐藏多个div

4 个答案: