首页 文章

切换显示隐藏的多个div

提问于
浏览 次
0

好的，所以我有多个div（7），我想切换为show hide . 如果一个div打开休息应该隐藏，当我打开一个新的div时，其他人应该隐藏 . 我已经能够用下面的jquery完成这个

function showDivs() {
    $(".head").click(function() {
        $(".Content").hide();
        $(this).next().fadeIn("slow");

    })
}

其中 .head 是每个div的 Headers ， .Content 是div的类 . 通过从 .head() 调用 showDivs() ，我已经完美地工作了 . 现在的问题是，在我页面的左侧，我已经设置了 ul li . 我有7个 li 项，对应7个div . 我的意思是点击第一个 li 相应的 div 应该打开，其他人应该隐藏，点击第二个 li 第二个 div 应该打开，其他人隐藏 .

有没有人知道如何让这些div显示隐藏在左边的 li 项目的动作上 . 我知道我必须为 showDivs() 传递参数，但不知道如何？

帮助表示赞赏

javascript jquery show-hide function-parameter

5 回答

  • 0

    如果你给li和相应的div相同 class ，那么你可以说类似的东西

    function showDivs() {
$("li").click(function() {
    $(".Content").hide();
    clickedID = $(this).attr("class");
    $('div#'+clickedID).fadeIn("slow");

})

    }

    回复于
  • 0

    如何为每个列表项指定一个id，并为每个项容器指定一个相应的id . 因此，您的列表项的ID为“item01”..“item07”，您的内容容器的ID为“item01c”..“item07c” . 然后你可以这样做：

    $("li").click(function() {
    showDivs($(this).attr("id"));
})

function showDivs(callerId) {
  $(".content").hide();
  $(".content", "#" + callerId + "c").fadeIn();  
}

    可以在这里看到工作示例：http://jsfiddle.net/ECbkd/5/ 1

    回复于
  • 0

    如果你想使用之前建议的.index（），那么我相信这将是最简单的方法（在这里查看http://jsfiddle.net/ECbkd/7/）：

    $("li").click(function() {
    $(".content").hide();
    $('.item').eq($(this).index()).children('.content').fadeIn();
})

    您可以添加此项以便在单击 Headers 时显示内容：

    $("h2", ".container").click(function() {
    $(".content").hide();
    $(this).parent().children('.content').fadeIn();
})

    *** EDIT START *** 要在 Headers 处点击内容切换，请使用以下命令：

    $("h2", ".container").click(function() {
    $(".content").not($(this).parent().children('.content')).hide();
    $(this).parent().children('.content').toggle();
})

    这里更新了代码http://jsfiddle.net/ECbkd/8/ *** EDIT END ***

    这是基于这样的HTML：

    <ul>
    <li>Item 01</li>
    <li>Item 02</li>
    <li>Item 03</li>
    <li>Item 04</li>
    <li>Item 05</li>
    <li>Item 06</li>
    <li>Item 07</li>
</ul>
<div class='container'>
    <div class='item'>
        <h2>Header 1</h2>
        <div class='content'>Content 1</div>        
    </div>        
    <div class='item'>
        <h2>Header 2</h2>
        <div class='content'>Content 2</div>       
    </div>
    <div class='item'>
        <h2>Header 3</h2>
        <div class='content'>Content 3</div>       
    </div>
    <div class='item'>
        <h2>Header 4</h2>
        <div class='content'>Content 4</div>       
    </div>
    <div class='item'>
        <h2>Header 5</h2>
        <div class='content'>Content 5</div>       
    </div>
    <div class='item'>
        <h2>Header 6</h2>
        <div class='content'>Content 6</div>       
    </div>
    <div class='item'>
        <h2>Header 7</h2>
        <div class='content'>Content 7</div>       
    </div>

</div>
    回复于
  • -1

    我相信这是 .index() 发挥作用的地方：

    $(function() {
    $('ul li').each(function() {
        $(this).click(function(e) {
            var i = $(this).index();
            $('div').hide();
            $('div:eq('+i+')').show();
        });
    });
});

    这是一个非常基本的标记，但我相信你可以弄清楚如何使用你的代码 . 希望我帮忙！

    http://jsfiddle.net/Z3Hj7/

    EDIT ：在看过你的小提琴之后，我想我确切地想出了你想要的东西：

    $(function() {
    $('ul li').each(function() {
        $(this).click(function(e){
            e.preventDefault();
            var i = $(this).index();
            $('.content').hide();
            $('.head:eq('+i+')').next().show();
        }); 
    });
});

    看看小提琴：http://jsfiddle.net/DTcGD/25/

    回复于
  • 2

    如果我正确理解您的HTML结构，它看起来像这样：

    <!-- The list... -->
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<!-- The divs -- note I've assumed there's a container... -->
<div id="container">
  <div class="head">Header One</div>
  <div class="Content">Content One</div>
  <div class="head">Header Two</div>
  <div class="Content">Content Two</div>
  <div class="head">Header Three</div>
  <div class="Content">Content Three</div>
  <div class="head">Header Four</div>
  <div class="Content">Content Four</div>
</div>

    ......只有七件而不是四件 .

    如果是这样，这样做（live copy）：

    jQuery(function($) {

  $(".Content").hide();

  $("li").click(function() {
    showDivs($("#container div.head:eq(" + $(this).index() + ")"));
  });
  $(".head").click(function() {
    showDivs($(this));
  });

  function showDivs(head) {
    $(".Content").hide();
    head.next().fadeIn("slow");
  }

});

    在那里，我将列表隐含地关联到它们在容器中的位置 . 所以第一个 li 与第一个 div 相关，其中class = "head"，第二个与第二个相关，等等 . 我这样做是通过使用index知道单击了哪个 li ，然后使用:eq查找相关的 div.head .

    在结构上而不是使用 id 值进行操作会使维护变得更加容易 . 但是，也可以通过为每个 li data-div 属性赋予相关div的 id 值来实现：

    <ul>
  <li data-div="h1">One</li>
  <li data-div="h2">Two</li>
  <li data-div="h3">Three</li>
  <li data-div="h4">Four</li>
</ul>
<div id="container">
  <div id="h1" class="head">Header One</div>
  <div class="Content">Content One</div>
  <div id="h2" class="head">Header Two</div>
  <div class="Content">Content Two</div>
  <div id="h3" class="head">Header Three</div>
  <div class="Content">Content Three</div>
  <div id="h4" class="head">Header Four</div>
  <div class="Content">Content Four</div>
</div>

    然后（live copy）：

    jQuery(function($) {

  $(".Content").hide();

  $("li").click(function() {
    showDivs($("#" + $(this).attr("data-div")));
  });
  $(".head").click(function() {
    showDivs($(this));
  });

  function showDivs(head) {
    $(".Content").hide();
    head.next().fadeIn("slow");
  }

});

    data-* attributes自HTML5起有效，但所有浏览器现在都支持它们 . （ data-* 事件试图通过为人们提供一种有效的方法来编写和统治人们对无效属性的使用，而不会与未来对规范的添加相冲突 . ）

    回复于

相关问题