0

我有一个这样的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>

当我单击“一个”链接时，我想做两件事：

  1. 将 DIV #fruit 的内容替换为数组中的第一项 - Apple。
  2. 显示第一个 DIV（一些内容）并隐藏其他两个 div

我也想对其他两个链接执行此操作 - 当我单击链接“两个”时，我想显示 DIV（一些内容二）并将 DIV #fruit 替换为数组中的第二项 - 香蕉。

这是我尝试过的：

var items = $('#links ul li');
items.click(function(event){
    event.preventDefault();
    var which = $(this).index();
    $('div').find('div').hide().eq(which).show();
    $('#fruit').innerHTML = data.headerStrings[which];
});

谢谢你的时间。

4

2 回答 2

1

演示

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>​​​
于 2012-11-02T04:23:30.110 回答
0

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

jquery模板介绍将让您入门。总而言之，您将加载所有div并将其隐藏，然后根据单击显示/隐藏div。有一个jquery toggle div 方法。

于 2012-11-02T04:20:57.080 回答