2012-07-11 88 views
0

這個問題是相當具體的代碼,我試圖使用,第一生病承認我不知道如何寫在jQuery中,我更黑客/操縱現有的腳本,但我會在某個階段學習,但我需要解決當前的問題。jQuery鏈接操作

基本上,我有一個簡單的標籤佈局,將內容互換,我的問題是我交換的內容是從CMS生成的,因此#screen內部的鏈接會將您帶到不同的頁面。我想要做的就是將內容保留在#screen div中,方法是操縱一個href或者其他的東西,我只能用iframe來實現,但是id要儘可能遠離它。對不起,如果我的解釋不清楚下面的代碼。

<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> 
+0

你想要做的是從cms中加載一個內容到一個div當你點擊鏈接是對的? – 2012-07-11 22:13:29

回答

2

爲了將內容加載到一個div你可以使用load() - http://api.jquery.com/load/

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

你可能想選擇一類這些鏈接,但因爲否則你的頁面上的每一個環節都會加載到content