2012-07-11 90 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