添加具有动态内容的选项卡

Question

嗨，当我单击列表选项时，我想添加具有动态内容的新选项卡。内容通过给定的 href url 获取。

<script type="text/javascript" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/dynamic_tabs/jquery-1.4.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#documents a").click(function() {
            addTab($(this));
        });

        $('#tabs a.tab').live('click', function() {
            // Get the tab name
            var contentname = $(this).attr("id") + "_content";

            // hide all other tabs
            $("#content p").hide();
            $("#tabs li").removeClass("current");

            // show current tab
            $("#" + contentname).show();
            $(this).parent().addClass("current");
        });

        $('#tabs a.remove').live('click', function() {
            // Get the tab name
            var tabid = $(this).parent().find(".tab").attr("id");

            // remove tab and related content
            var contentname = tabid + "_content";
            $("#" + contentname).remove();
            $(this).parent().remove();

            // if there is no current tab and if there are still tabs left, show the first one
            if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {

                // find the first tab    
                var firsttab = $("#tabs li:first-child");
                firsttab.addClass("current");

                // get its link name and show related content
                var firsttabid = $(firsttab).find("a.tab").attr("id");
                $("#" + firsttabid + "_content").show();
            }
        });
    });
    function addTab(link) {
        // If tab already exist in the list, return
        if ($("#" + $(link).attr("rel")).length != 0)
            return;

        // hide other tabs
        $("#tabs li").removeClass("current");
        $("#content p").hide();

        // add new tab and related content
        $("#tabs").append("<li class='current'><a class='tab' id='" +
            $(link).attr("rel") + "' href='#'>" + $(link).html() + 
            "</a><a href='#' class='remove'>x</a></li>");

        $("#content").append("<p id='" + $(link).attr("rel") + "_content'>" + 
            $(link).attr("href") + "</p>");

        // set the newly added tab as current
        $("#" + $(link).attr("rel") + "_content").show();
    }
</script>

这是我的 html 代码

<div id="main">
<div id="doclist">
    <h2>Documents</h2>
    <ul id="documents">
        <li><a href="#" rel="Document1" title="This is the content of Document1">Document1</a></li>
        <li><a href="http://www.dynamicdrive.com" rel="Document2" title="This is the content of Document2">Document2</a></li>
        <li><a href="http://www.dynamicdrive.com" rel="Document3" title="This is the content of Document3">Document3</a></li>
        <li><a href="http://www.dynamicdrive.com" rel="Document4" title="This is the content of Document4">Document4</a></li>
        <li><a href="http://www.dynamicdrive.com" rel="Document5" title="This is the content of Document5">Document5</a></li>
    </ul>
</div>
<div id="wrapper">
    <ul id="tabs">
        <!-- Tabs go here -->
    </ul>
    <div id="content">
        <!-- Tab content goes here -->
    </div>
</div>
</div>
<div id="Document1" style="display:none;">anvdsanvidsnvsidvnsdovnsdoivnsdovsdovnsovsvsmvpsmvlksdvsmdkvmsdkvmsvsd</div>

它正在工作，但我不想这样。我想显示我在href中提到的内容。 请帮帮我，我该怎么做。

Answer 1

这基本上取决于您从 url 收到的数据类型是什么类型的请求。假设您只是想显示一个 HTML 页面，您可以按如下方式附加 iframe。

HTML

<div class="dynamic_content">
    <ul class='url_list'>
        <li><a href='#' data="http://www.example.com">Load Example</a></li>
    </ul>
</div>

jQuery

$(document).ready(function(){
    $('ul.url_list > li > a').click(function(){
        var me = $(this);
        var url = me.attr('data'); 
        $('.dynamic_content > iframe').remove();
        $('.dynamic_content').append('<iframe src="' + url + '" width="100%" height="300px"></iframe>');
    });
});

另外，请注意我没有测试上面的代码。这只是我的想法，因此您可能需要对其进行测试。

更新：

好的，我已经更新并测试了代码。另外，这里是working example (JSFiddle)

更新：

这是更新后的JSFiddle