Jquery 使用JSON数据更新DIV并显示/隐藏DIV

我有一个json数组，如下所示：

var headerStrings = [
        "Apple",
        "Banana",
        "Pineapple",
    ];

这是我的HTML：

<div id="links">
    <ul>
        <li><a>One</a></li>
        <li><a>Two</a></li>
        <li><a>Three</a></li>
    </ul>
</div>

<div id="fruit">Mango</div>
<div>
    <div>Some content one</div>
    <div>Some content two</div>
    <div>Some content three</div>
</div>

---

谢谢您的时间。

您可以使用jquery模板来解决这个问题

将让您开始。总之，您将加载所有div并将其隐藏，然后根据单击显示/隐藏div。有一个

var headerStrings = [
    "Apple",
    "Banana",
    "Pineapple",
];

$('ul li a').each(function(i){
 $(this).click(function(){
     $('#fruit').html(headerStrings[i]);
     $('#content').children().hide().eq(i).show();
 });
});


<div>
<ul>
    <li><a>One</a></li>
    <li><a>Two</a></li>
    <li><a>Three</a></li>
</ul>

var头串=[
“苹果”，
“香蕉”，
“菠萝”，
];
$（'ul li a'）。每个（功能（i）{
$（此）。单击（函数（）{
$（'#fruit'）.html（headerStrings[i]）；
$（'#content'）.children（）.hide（）.eq（i）.show（）；
});
});

一个
两个
三

芒果 一些内容 内容二 一些内容三 ​​​

---

嗨，安德鲁，我用我的尝试更新了问题。

var headerStrings = [
    "Apple",
    "Banana",
    "Pineapple",
];

$('ul li a').each(function(i){
 $(this).click(function(){
     $('#fruit').html(headerStrings[i]);
     $('#content').children().hide().eq(i).show();
 });
});


<div>
<ul>
    <li><a>One</a></li>
    <li><a>Two</a></li>
    <li><a>Three</a></li>
</ul>

<div id="fruit">Mango</div>
 <div id='content'>
 <div>Some content one</div>
 <div>Some content two</div>
 <div>Some content three</div>
</div>​​​