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>

リンク「One」をクリックすると、2つのことを実行したいと思います。

  1. DIV#fruitのコンテンツを配列の最初のアイテムであるAppleに置き換えます。
  2. 最初のDIV（一部のコンテンツ1）を表示し、他の2つのDIVを非表示にします

他の2つのリンクについてもこれを実行します。リンク「2」をクリックすると、DIV（一部のコンテンツ2）が表示され、DIV#fruitが配列の2番目の項目であるバナナに置き換えられます。

これが私が試したことです：

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トグルdivメソッドがあります。

于 2012-11-02T04:20:57.080 に答える