Я видел здесь несколько вопросов, связанных с этим, но я не вижу точной ситуации, о которой говорю, поэтому решил, что спрошу.

У меня есть страница с двумя div. Дополнительный блок навигации (sidediv) и блок основного тела (maindiv).

Что я хочу: щелкнуть ссылку в боковой панели навигации, чтобы загрузить страницу в основном div. В любом случае, на данный момент это всегда одна и та же страница, но это огромная страница с несколькими якорями. Элементы в боковой ссылке на различные якоря.

Что я делаю: мои боковые ссылки выглядят так:

<a href="#" onclick="loadPage('mypage.html#ds'); return false;">Desired Section</a>

И JS:

function loadPage(url){
    var xhr= new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange= function() {
        if (this.readyState!==4) return;
        if (this.status!==200) return; 
        document.getElementById('maindiv').innerHTML= this.responseText;
    };
    xhr.send();
}

Что происходит: он отлично загружает mypage.html, но отказывается переходить к привязке.

Как мне это сделать (без jQuery, кстати, я в настоящее время не использую его на сайте и не хочу загружать его для одной цели)

Спасибо.

0
Reverend Bubbles 16 Фев 2018 в 20:41

1 ответ

Лучший ответ

Хорошо, это было интересно, поэтому я попробовал это для вас. Вот что я придумал. Он использует scrollIntoView. Также имейте в виду, что я смоделировал вызов ajax, поэтому моя функция loadPage делает некоторые вещи иначе, чем вы.

var pages = {
    'mypage.html': '<div id="ts" class="page">my stuff</div><div id="ds" class="page">my more stuff</div><div id="eds" class="page">my even more stuff</div>',
    'yourpage.html': '<div id="ts" class="page">your stuff</div><div id="ds" class="page">your more stuff</div><div id="eds" class="page">your even more stuff</div>'
};

function loadPage(url) {
    var set = url.split('#'),
        page = set[0],
        id = set[1];

    // simulate xhr request
    setTimeout(function() {
        document.getElementById('maindiv').innerHTML = pages[page];
        document.getElementById(id).scrollIntoView();
    }, 1000);
}
.page {
  height: 400px;
}

.menu {
  width: 200px;
  float: left;
  position: fixed;
}

#maindiv {
  width: 50px;
  float: right;
  background: lightblue;
}
<div class="menu">
    <a href="#" onclick="loadPage('mypage.html#ds'); return false;">My Page #ds</a><br />
    <a href="#" onclick="loadPage('yourpage.html#eds'); return false;">Your Page #eds</a>
</div>

<div id="maindiv">
</div>
0
gforce301 16 Фев 2018 в 22:52