如何在点击中更改div中的内容？

Trying to change some content in divs on click. Found one solution, but it works only with ID. Change content of only one div. How to fix it?

尝试在点击时更改div中的某些内容。找到一个解决方案,但它只适用于ID。只更改一个div的内容。怎么解决?

$(document).ready(function () {    
$("#buttons a").click(function() {
    var id = $(this).attr("id");
    $("#pages div").css("display", "none");
    $("#pages div#" + id + "").css("display", "block");
    });});

Here is Jsfiddle

这是Jsfiddle

UPDATE. Edited Jsfiddle a little bit. Here is picture:

UPDATE。编辑Jsfiddle一点点。这是图片:

2 个解决方案

#1

Not sure if I understand you correctly, but if you want to change the content of multiple div's, you can do it like this:

不确定我是否理解正确,但如果你想改变多个div的内容,你可以这样做:

https://jsfiddle.net/Airrudi/mA8hj/139/

$(document).ready(function () {    
    $("button").click(function() {
        var content = $(this).data('content');   
        $('#pages .allowChange p').html(content);
    });    
});

Can you elaborate a bit more on your question if this is not what you are looking for?

如果这不是你想要的,你能否详细说明你的问题?

#2

You can get the first div by using :nth-child:() selector. Read about this Here

您可以使用:nth-child :()选择器获取第一个div。在这里阅读这个

$(document).ready(function () {    
  $("#buttons a").click(function() {
    var id = $(this).attr("id");
    $("#pages div:nth-child(1)").css("display", "none");
    $("#pages div#" + id + "").css("display", "block");
  });
});

#1