jQuery加载到div中,然后所有链接都应该在该div+切换函数中打开

jQuery加载到div中,然后所有链接都应该在该div+切换函数中打开,jquery,html,hyperlink,toggle,loaded,Jquery,Html,Hyperlink,Toggle,Loaded,我是jQuery&stackoverflow的新手 我已经花了两天的时间试图解决这个问题,在谷歌上到处搜索,却无法真正找到答案——所以是时候伸出援手了 我有一个.主目录作为主要内容 我有一个菜单边栏。 在那个菜单上我有一个关于thumbslink的链接 当我单击“拇指链接”时 我想将/project-single.html项目single中的外部div加载到siteloader中 将siteloader替换为.main 当我再次单击“拇指链接”时,我希望它反转 1号和2号工作正常 现在的问题是什

我是jQuery&stackoverflow的新手

我已经花了两天的时间试图解决这个问题,在谷歌上到处搜索,却无法真正找到答案——所以是时候伸出援手了

我有一个.主目录作为主要内容 我有一个菜单边栏。 在那个菜单上我有一个关于thumbslink的链接

当我单击“拇指链接”时 我想将/project-single.html项目single中的外部div加载到siteloader中 将siteloader替换为.main 当我再次单击“拇指链接”时,我希望它反转 1号和2号工作正常

现在的问题是什么不能一起工作

我想在同一div中打开siteloader中可见的所有链接 同时使用thumbslink作为切换工具,如2。 无论如何,这是我的代码:

HTML rougly:

谢谢

<div>
<a href="#" id="thumbslink">THUMBS</a>
</div>

<div class="main">Main content</div>

<div id="siteloader">
    <a href="">If your external site is not in the same domain as your site then No. I would suggest you to use JSONP objects to send/receive between sites in different domain.
    </a><br/>
    <a href="">If it the same  then use ajax request
    </a>
</div>

这没什么区别。
// LOAD #Project-single onClick #thumbslink in #siteloader

$(function() {
    $("#thumbslink").click(function() {
        $('#siteloader')
           .load('http://jacoberiksson/project-single.html #project-single');

    });

// LOAD all clicked links (a) in #siteloader

$("#siteloader").on("click", "a", function (e) {
    $("#siteloader").load($(this).attr("href"));
    e.preventDefault();
});

});

// TOGGLE #siteloader & .main onClick #thumbslink

$(function(){
    $("#thumbslink").on("click", function(){
        $("#siteloader").toggle('fade');
        $(".main").toggle('fade');

    });
});
<div>
<a href="#" id="thumbslink">THUMBS</a>
</div>

<div class="main">Main content</div>

<div id="siteloader">
    <a href="">If your external site is not in the same domain as your site then No. I would suggest you to use JSONP objects to send/receive between sites in different domain.
    </a><br/>
    <a href="">If it the same  then use ajax request
    </a>
</div>
$("#siteloader").hide();

$("#thumbslink").click(function() {
        $('#siteloader').find('a').each(function() {
        $('#siteloader').append($(this).attr('href'));
    });
});


$(function(){
    $("#thumbslink").on("click", function(){
        if($('#siteloader').is(":visible")){
            $("#siteloader").hide('');
            $(".main").show('');
        }
        else{
            $(".main").hide('');
            $("#siteloader").show('');
        }
    });
});