Question

我有一个按字母顺序排列的索引，点击后取消隐藏包含其内容的div。

这是HTML，所以我可以正确解释：

<ul class="index">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<div id="index-A" class="hide">A contents</div>
<div id="index-B" class="hide">B contents</div>
<div id="index-C" class="hide">C contents</div>

当点击一封信时，我想取消隐藏它的内容div，并隐藏任何其他可见的内容。

我怎么能这样做？

以下是我一直在尝试的内容，但我仍然坚持这一点：

$('.index li').click(function(e) {
    // somehow reference the content div using: "index-" + $(this).text()
});

Answer 1

听起来你正在寻找这个：

$('.index li').click(function(e) {
   var div =  $('#index-'+  $(this).text()).show();
   div.siblings('div').hide();
});

您可以在此处查看一个有效的示例：http://jsfiddle.net/ktsfs/1/

Answer 2

我喜欢Martin's solution，但是如果您使用的是HTML5，那么在HTML中定义链接及其内容之间的关系会比在Javascript中更好：

<ul class="index">
    <li data-show="#index-A">A</li>
    <li data-show="#index-B">B</li>
    <li data-show="#index-C">C</li>
</ul>

<div id="index-A" class="hide">A contents</div>
<div id="index-B" class="hide">B contents</div>
<div id="index-C" class="hide">C contents</div>

使用Javascript：

$(".index li").click(function(e) {
   var div = $($(this).data("show")).show();
   div.siblings("div").hide();
});

Answer 3

非常简单：

$('.index li').click(function(e) {
  $('div.hide').hide();
  $('#index-' +  $(this).text()).show();
});

Answer 4

尝试这样的事情：

为每个索引项目指定一个您希望它引用的字母的类：

<ul class="index">
    <li class="A">A</li>
    <li class="B">B</li>
    <li class="C">C</li>
</ul>

<div id="index-contents">
    <div id="index-A" class="hide">A contents</div>
    <div id="index-B" class="hide">B contents</div>
    <div id="index-C" class="hide">C contents</div>
</div>

然后您可以使用以下命令查找/显示索引内容：

$('.index li').click(function(e) {
    // Hide all
    $('#index-contents .hide').hide();
    // Find the class of the clicked index item
    var index = $(this).attr('class');
    // Show the index's contents
    $('#index-contents').children('#index-'+index).show();
});

http://jsfiddle.net/uS4Cs/1/

Answer 5

演示http://jsfiddle.net/CzzG8/

$('.index li').click(function(e) {
    var targetDiv = "#index-" + $(this).text();
    $('div').show();
    $(targetDiv).hide();
});

如何使用另一个元素中包含的id引用div？

5 个答案: