0

file:///D:/www/WebProjects/project_01/test3.html#two
Нужно что бы показывал адрес без #two. Пытаюсь делать так:

function changeUrl() {
  var getUrl = window.location.href;
  var arrUrl = getUrl.split('#', 1);
  if (window.location.href.indexOf("#" !== -1)) {
    window.location = arrUrl;
  }
}
section {
  min-height: 200px;
  background: #f6f6f6;
  border: 1px solid orangered;
  margin: 20px auto;
  padding: 10px;
  border-radius: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <title>Test page</title>
</head>

<body>
  <header>
    <h3 class="text-typing">This page for the testing some scripts and styles</h3>
    <nav class="navbar">
      <ul class="nav navbar">
        <li class="nav-item"><a href="#one" class="nav-link" onclick="changeUrl()">section one</a></li>
        <li class="nav-item"><a href="#two" class="nav-link" onclick="changeUrl()">section two</a></li>
        <li class="nav-item"><a href="#three" class="nav-link" onclick="changeUrl()">section three</a></li>
        <li class="nav-item"><a href="#four" class="nav-link" onclick="changeUrl()">section four</a></li>
        <li class="nav-item"><a href="#five" class="nav-link" onclick="changeUrl()">section five</a></li>
      </ul>
    </nav>
  </header>
  <mine>

    <section id="one">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, libero, explicabo. At modi quis, eum necessitatibus rem iste velit officiis non beatae! Illo quis repellendus similique repellat, id nam sequi.</p>
    </section>

    <section id="two">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, libero, explicabo. At modi quis, eum necessitatibus rem iste velit officiis non beatae! Illo quis repellendus similique repellat, id nam sequi.</p>
    </section>

    <section id="three">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, libero, explicabo. At modi quis, eum necessitatibus rem iste velit officiis non beatae! Illo quis repellendus similique repellat, id nam sequi.</p>
    </section>

    <section id="four">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, libero, explicabo. At modi quis, eum necessitatibus rem iste velit officiis non beatae! Illo quis repellendus similique repellat, id nam sequi.</p>
    </section>
    <section id="five">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, libero, explicabo. At modi quis, eum necessitatibus rem iste velit officiis non beatae! Illo quis repellendus similique repellat, id nam sequi.</p>
    </section>
  </mine>
</body>

</html>

Обрезает лишнее, но и соответственно отрабатывает по обрезанной ссылке.

1
  • на ссылки при клике вешаем preventDefault а переход отслеживаем по offsetTop 20 фев 2019 в 3:20

2 ответа 2

1

У Вас опечатка в if-выражении в функции changeUrl(). Она должна быть определена так:

function changeUrl() {
  var getUrl = window.location.href;
  var arrUrl = getUrl.split('#', 1);
  if (window.location.href.indexOf("#") !== -1) {
    window.location = arrUrl;
  }
}

1
  • 10 раз просмотрел, только увидел ошибку... Был не прав... )))
    – Air
    20 фев 2019 в 6:50
0

Насколько я понимаю, в макете вы указываете через # , но при выгрузке сайта на хостинг желательно прописать прямые ссылки

1
  • Это якорные ссылки. При клике на якорную ссылку страница прокручивается до тега с указаным как раз id. Так что тут все нормально.
    – vvv7220
    20 фев 2019 в 15:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.