Question

基本上，我想要的是当你点击某个元素时（例如：＃click1＃click2＃click3），某个div变得可见。当您单击另一个元素时，会显示另一个div，但它会隐藏前一个div，依此类推。我已经有了代码工作但感觉就像我重复自己太多了。我的意思是，如果有15个元素会在onClick上显示不同的内容？有更清洁的方法吗？链接到Jsfiddle。代码：

//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 example

现在当然，这会给你的页面中的其他列表和div带来问题，并且解决方法就是用一个容易包装你想要在一个元素（例如div）中定位的列表/ div的块可选标识符，如类或ID。但是既然你给出了一个基本的代码示例，我给了你一个简单的解决方案;）

jquery隐藏显示内容onclick-清洁代码

1 个答案: