1

主にここで立ち往生しており、助けていただければ幸いです。特定のタイトルがクリックされたときに、特定のトピックの非表示の div コンテンツを別の領域に移行しようとしています。すぐにコンテンツを移行できますが、特定のトピックのコンテンツではなく、クリックするとコンテンツが循環するだけです。

貧弱なタイトルで申し訳ありません。正確な問題を定義するのに苦労しています。もっとうまくやれると思ったら変えてください。

http://jsfiddle.net/vBCs5/1/

灰色の字幕をクリックすると、コンテンツが移行されます。

前もって感謝します。

Jクエリ:

$(document).ready(function() {

   $(".freemarker-wrap div").hide();

   $(".test").click(function () {

      $(".freemarker").each(function () {

        var working = $(this).contents();
        var ref = $(".content-box").contents();

        $(this).append(ref);
        $(".content-box").append(working);

   });
  });
});

HTML

<html>
<body>

<div class="page-wrap">
<div class="left-column-wrap">

<h1>FreeMarker +</h1>
<div class="freemarker-wrap">
    <span class="test">
        <h2>Lucene Call ></h2>
        <div class="freemarker">
        <p>Click to hide stories</p>
    </div>
</span>

<span class="test">
    <h2>Arrays ></h2>
    <div class="freemarker">
        <p>Arrays</p> 
    </div>
</span>

<span class="test">
<h2>Declaring and outputting variables ></h2>
    <div class="freemarker">
        <p>Declaring</p> 
    </div>
</span>

<span class="test">
    <h2>IF Statements ></h2>
    <div class="freemarker">
        <p>Statements</p>  
    </div>
</span>

<span class="test">
    <h2>Fragments ></h2>
    <div class="freemarker">
        <p>Fragments</p>
    </div>
</span>

<span class="test">
    <h2>Working with Numbers ></h2>
    <div class="freemarker">
        <h3>Numbers</h3>        
    </div>
</span>

<span class="test">
     <h2>Current Date ></h2>
     <div class="freemarker">     
        <p>Current</p>
     </div>
     </span>
 </div>

 <div class="javascript-wrap">
<h1>JavaScript +</h1>
 </div>

 <div class="javascript-wrap">
<h1>JQuery +</h1>
 </div>

 <div class="javascript-wrap">
<h1>HTML +</h1>
 </div>

 <div class="javascript-wrap">
<h1>CSS +</h1>
 </div>

 </div>

 <div class="content-box">
 </div>

</div>

</body>
</html>
4

2 に答える 2

2

私はあなたがそれを複雑にしすぎていると思います;）

$(document).ready(function() {

  $(".freemarker-wrap div").hide();

  $("span.test").click(function () {
      $(".content-box").html( $(this).find("div.freemarker").html() );
    });

 });
于 2013-01-22T11:41:16.880 に答える
2

これがあなたが求めているものだと仮定して...

$(document).ready(function() {

  $(".freemarker-wrap div").hide();
  $(".test").click(function () {
    var working=$(this).find(".freemarker").html(); // get that particular <span> html
    $(".content-box").html(working); <migrate it to content
 });
});

ここでフィドル

于 2013-01-22T11:39:15.180 に答える