0

この質問は、私が使用しようとしているコードに非常に固有です。最初に、jQueryでの記述方法がわからないことを認めます。既存のスクリプトをさらにハック/操作しますが、ある段階で学習しますが、修正が必要です。現在の問題。

基本的に、コンテンツをスワップアウトする単純なタブレイアウトがあります。私の問題は、スワップアウトするコンテンツがCMSから生成されるため、＃screen内のリンクから別のページに移動することです。私がやりたいのは、a hrefを操作するか、iframeでしか実現できないものを操作して、コンテンツを#screen div内に保持することですが、可能であれば、それを避けたいと考えています。私の説明が以下の明確なコードでない場合は申し訳ありません。

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
    .content {display:none;}
    .tab {cursor:pointer; width:20%; float:left; text-align:center; color:#fff; padding:10px;}
    #screen {clear:both; padding:20px 0 0 0;}
    </style>
    <script>
    $(document).ready(function(){
    var $content1 = $('.content').first().clone();
    $content1.css("display", "block");
    $('div#screen').html($content1);
    $(".tab").live("click", function() {
    var $content = $(this).next('div.content').clone();
    $content.css("display", "block");
    $('div#screen').html($content);}
    );
    });
    </script>
    <div class="tab">
    Tab Title
    </div>
    <div class="content">
    <a href="toplevelpage/pageexample.html">Link</a><br />
    <a href="toplevelpage/pageexample2.html">Link2</a><br />
    <a href="toplevelpage/pageexample3.html">Link3</a>
    </div>
<div class="tab">
    Tab Title2
    </div>
    <div class="content">
    <a href="toplevelpage/pageexample.html">Link</a><br />
    <a href="toplevelpage/pageexample2.html">Link2</a><br />
    <a href="toplevelpage/pageexample3.html">Link3</a>
    </div>
<div id="screen">
</div>
4

1 に答える 1

2

load()コンテンツを div にロードするには、 http://api.jquery.com/load/を使用できます。

$('a').on('click',function(e){
    e.preventDefault();
    $('div.content').load($(this).attr('href'));
});

ただし、これらのリンクをクラスで選択することをお勧めします。そうしないと、ページ上のすべてのリンクが にロードされてしまうからcontentです。

于 2012-07-11T22:13:55.047 に答える