jQuery загружает в div, тогда все ссылки должны быть открыты в этой функции div + toggle

Question

jQuery загружает в div, тогда все ссылки должны быть открыты в этой функции div + toggle

0

Я новичок в jQuery и stackoverflow.

Я пытаюсь исправить это уже 2 дня, гуглингом и не могу понять это - так что пора протянуть руку.

У меня есть.main div для основного контента
У меня есть #sidebar для меню.
В этом меню у меня есть ссылка на #thumbslink
1. Когда я нажимаю #thumbslink
  - Я хочу загрузить внешний div из "/project-single.html # project-single" в #siteloader
  - замените #siteloader на.main
2. Когда я снова нажимаю #thumbslink, я хочу, чтобы он менялся

(1 и 2 отлично работает)

Проблема (что сейчас не работает вместе)

Я хочу открыть все ссылки, видимые в #siteloader в том же div
И в то же время используйте #thumbslink как toggler (например, # 2).

Во всяком случае вот мой код:

HTML (rougly):

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

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

<div id="siteloader"></div>

JQuery:

// 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');

    });
});

Благодарю!

jacoberiksson 20 дек. 2013, в 15:57

Источник

Теги:

jquery

html

hyperlink

toggle

loaded

1 ответ

Ещё вопросы

Florin · Answer 1 · 2013-12-20T12-40-00.000Z

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

JQuery

$("#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('');
        }
    });
});

JsFiddle