Question

我有几个街区：

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
....

的CSS：

#b{display:none;}
#c{display:none;}
#d{display:none;}
....

NAV：

<span id="show-a">Show A Block</span>
<span id="show-b">Show B Block</span>
....

如何制作，当我点击Show A Block按钮时，会显示带id=a的div？

Answer 1

最简单的解决方案是引用一个对象：

<强> HTML

<span id="show-a" rel="#a">Show A Block</span>
<span id="show-b" rel="#b">Show B Block</span>

<强> JS

$('span[rel]').click(function() {
    var obj = $(this).attr('rel');
    $(obj).show();
})

http://jsfiddle.net/mikhailov/mAKZj/

Answer 2

交换span和div的Id。它会起作用。

CSS

#show-a {display:none;}

HTML

<div id="show-a"></div>
<span id="a">Show A Block</span>

JS

$(document).ready(function() {
    $('span').click(function() {
        var showId = $(this).attr("id");
        $("#show-" + showId).show();
    });
});

Answer 3

以下是我的一些（或多或少随机）想法：

$('span#show-a').click(function() {
    $('div#a').show();
});

如果您希望这是全局的（对于所有ID），您可以尝试这样的事情：

var ids = ['a', 'b', 'c', 'd', etc.];
for (var i in ids)
{
    var id = ids[i];
    $('span#show-'+id).click(function() {
        $('div#'+id).show();
    });
}

当然，你会希望以某种方式获得所有ID，使其更具动态性。最好的方法是将所有div包含在id为wrapper的另一个div中并使用：

var ids = [];
$('div#wrapper div').each(function() {
    ids.push($(this).attr('id'));
});

如果您希望在点击后隐藏其他div，您可以将自定义类添加到所有div，例如myClass并在click处理程序的开头添加以下行：

$('div.myClass').hide();

使用jquery在块之间平滑切换

3 个答案: