jquery隐藏显示内容onclick-cleaner代码

Question

基本上，我想要的是当你点击某个元素（例如：#click1#click2#click3）时，某个div会变得可见。当你点击另一个元素时，会出现另一个div，但它隐藏了前一个，以此类推。我已经有了代码，但感觉我重复得太多了。我的意思是，如果有15个元素可以在Click上显示不同的内容，会怎么样？有更干净的方法吗？链接到Jsfidle。代码：

//html
<ul>
    <li id="click1">A</li>
    <li id="click2">B</li>
    <li id="click3">C</li>
</ul>
<div class="DIV1">BLA</div>
<div class="DIV2">BLA</div>
<div class="DIV3">BLA</div>

//JS
 $(".DIV1, .DIV2, .DIV3").addClass("hide");
$("#click1").click(function () {
    $(".DIV1").show();
    $(".DIV2 ,.DIV3").hide();
});
$("#click2").click(function () {
    $(".DIV2").show();
    $(".DIV1,.DIV3").hide();
});
$("#click3").click(function () {
    $(".DIV3").show();
    $(".DIV1,.DIV2").hide();
});

Answer 1

以下是最基本的方法：

$('li').click(function () {
    $('div').hide().eq($(this).index()).show()
})

jsFiddle示例

当然，考虑到页面中的其他列表和div，这会有问题，解决方法是用一个易于选择的标识符（如类或ID）将您想要针对的列表/div块封装在一个元素（例如div）中。但由于您给出了一个基本的代码示例，我给了您一个简单的解决方案；）