Как изменить внешний вид внутренних ссылок?

В настоящее время я работаю над типовым проектом, который представляет собой сайт с одной страницей, где все детали разделены на разделы. Я звоню во весь раздел через внутреннюю ссылку, и я хочу изменить структуру URL-адресов этих ссылок с "example.com/#section-1" на "example.com/about-us". Итак, как я могу это достичь? Ниже приведен пример структуры кода.Как изменить внешний вид внутренних ссылок?

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style> 
 
     html, body, body *{ 
 
     margin:0; 
 
     padding:0; 
 
     } 
 
     body, html, div{ 
 
     height:100%; 
 
     width:100%; 
 
     } 
 
     #container-1{ 
 
     background-color:green; 
 
     } 
 
     #container-2{ 
 
     background-color:yellow; 
 
     } 
 
     #container-3{ 
 
     background-color:gray; 
 
     } 
 
     .container p{ 
 
     padding:10px; 
 
     font-size:50px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="main-container"> 
 
     <div id="container-1" class="container"><p>Container-1</p><a href="#container-2">To Container-2</a></div> 
 
     <div id="container-2" class="container"><p>Container-2</p><a href="#container-3">To Container-3</a></div> 
 
     <div id="container-3" class="container"><p>Container-3</p><a href="#container-1">To Container-1</a></div> 
 
    </div> 
 
    </body> 
 
</html>

источник

2016-12-13 Lalit Pal

использование 'о-us' или' контакт-us' вместо 'container-1' или' container-2'. –

Я могу использовать их, но я получаю символ «#» в URL-адресе, который я не хочу. –

Если я вас правильно понимаю, вы можете использовать history.pushState.

Так вот шаги:

Получить относительный URL из щелкнули ссылку.
Использование pushState подтолкнуть государство к истории (так что вы можете использовать назад и вперед.
прокрутки страницы к выбранному элементу.

Держите это в возражаете,, что вам нужно настроить ваш сервер, который будет переводить (переписать) любую подстраницу на главную страницу. Поэтому, когда пользователь попытается перейти на «подстраницу» (например, container2), сервер вернет основную страницу, а с помощью javascript вы перейдете на страницу в правой части.

Array.prototype.forEach.call(document.querySelectorAll('a'), function(a) { 
    a.addEventListener('click', function(e) { 
    e.preventDefault(); 

    var link = a.hash.replace('#', ''); 
    history.pushState(null, 'page', link); 
    scrollToElement(); 
    }); 
}); 

function scrollToElement() { 
    var page = location.pathname.replace('/', ''), 
     container = document.querySelector('#' + page); 

    container.scrollIntoView(); 
}

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     html, body, body *{ 
     margin:0; 
     padding:0; 
     } 
     body, html, div{ 
     height:100%; 
     width:100%; 
     } 
     #container-1{ 
     background-color:green; 
     } 
     #container-2{ 
     background-color:yellow; 
     } 
     #container-3{ 
     background-color:gray; 
     } 
     .container p{ 
     padding:10px; 
     font-size:50px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="main-container"> 
     <div id="container-1" class="container"><p>Container-1</p><a href="#container-2">To Container-2</a></div> 
     <div id="container-2" class="container"><p>Container-2</p><a href="#container-3">To Container-3</a></div> 
     <div id="container-3" class="container"><p>Container-3</p><a href="#container-1">To Container-1</a></div> 
    </div> 
    </body> 
</html>

http://output.jsbin.com/zaduqo

источник

2016-12-13 09:51:00

Работает. Но на моей локальной машине он не работает, и он дает мне эту ошибку «Не удалось DOMException: не удалось выполнить« pushState »в« История »: объект состояния истории с URL-файлом: /// D:/x/container-2 'не может быть создан в документе с источником «null» и URL ». Я не знаю почему? И не могли бы вы объяснить мне, если вы не возражаете, как это работает, поскольку я новый ученик к JavaScript. –

Я думаю, вам нужно запустить его с локального сервера, а не с файловой системы ([учебник по созданию локального сервера здесь] (https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment)). –

Хорошо. Я попробую. Спасибо вам за помощь. –

Я бы рекомендовал с помощью Apache mod_rewrite модуль

RewriteRule ^/about-us /index.php#container-2 [NE,L,R=301] 
RewriteRule ^/contact-us /index.php#container-1 [NE,L,R=301]

, а затем с помощью

<a href="about-us">links</a>

источник

2016-12-13 10:06:02 Butthead

Извините, мой друг, это не сработало. Хост говорит, что файл не существует. –

Как изменить внешний вид внутренних ссылок?

ответ

Смежные вопросы