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

要将内容加载到 div 中，您可以使用load()- 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 回答