Как сделать переход на новую страницу на сайте

Обновлено: 03.07.2024

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

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

Разберем на примерах.

если у вас на сайте есть страничка, рассказывающая о себе, например o-sebe.html, то для того чтобы сделать ссылку на эту страницу, надо написать так :

В параметре href= мы написали адрес страницы, а между тегами и мы должны написать текст, нажав на который произойдет переход по ссылке.

Вместо текста может быть любая картинка. Тогда нажав на картинку также будет сделан переход по ссылке.

Вернемся к нашему предыдущему примеру и добавим ссылки на этот сайт, вот так

Моя первая интернет страница всего лишь за 5 минут

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

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

Добавление небольших деталей может придать Вашему сайту завершенности. jQuery это прекрасная JavaScript библиотека, которая поможет довести мельчайшие детали до совершенства.

Начнем с HTML и CSS

С самого начала нам понадобится CSS. Необходимо поменять свойства тега body:

Все визуальные элементы внутри этого тега не будут загружаться, таким образом все будет спрятано. Многие могут заметить, что это довольно рискованно, так как у пользователей с отключенным JS будет пустой экран.

Поэтому, лучшее решение этой ситуации - это добавление display:none с помощью jQuery. Если у пользователей будет отключен JS, они все равно увидят контент страницы.

Теперь нам необходимо подключить jQuery в шапке документа:

Эффект смены страниц с помощью jQuery

После первых шагов нам необходимо написать jQuery код, который создавал бы эффектный переход.

Первая строка скрипта описана выше, а далее fadeIn метод вызывается на 2 секунды. Можете поэкспериментировать с временем.

Теперь при загрузке страницы у нас получается небольшой эффект затемнения. Но если мы нажмем на какую-либо ссылку, то ничего не произойдет.

Для начала давайте присвоим специальный класс ссылке, которая ведет на другую страницу.

Теперь вернемся к нашему скрипту:

Теперь мы "попросили" наш скрипт следить за кликами пользователей по ссылкам с классом transition. Если пользователь нажимает, скрипт немедленно сбрасывает браузерный редирект, потом сохраняет целевой УРЛ в переменную linkLocation. Далее мы затемняем элемент body на секунду и вызываем функцию redirectPage. Эта функция перенаправляет пользователя на нужную страницу.

Точная настройка

Все готово и Вы уже можете всем пользоваться. Но есть еще несколько маленьких моментов. Данный эффект будет выглядеть лучше, если Вы определите цвет для тега html схожий с цветом фонового изображения сайта.

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

Только не забывайте потом менять пути, если что-то перекладываете в другое место.

Если хотите, чтобы все ссылки открывали новую страницу с таким эффектом (не только с классом transition ), тогда просто замените $("a.transition") на $("a").

Удачи! До Новых уроков!

5 последних уроков рубрики "jQuery"

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Есть, например, сайт, где меню/контакты/отзывы. Меняться, понятное дело, должна контентная часть. Так вот как при знаниях html/css делается переход на страницы? Например создается уже другой документ типа menu.html contakti.html otzyvi.html и делается с основной страницы переход на них, а у них в свою очередь в документах заменяется контентная часть у каждого на свою? или я что то не так понимаю?

Как свернуть переход по страницам?
Есть сайт, на нем пишут вопросы\отзывы о проделанной работе. Сайт не мой, но попросили кое-что.

Как перенести многостраничный сайт на wordpress?
Есть сайт с несколькими страницами, нужно перенести его на интернет-хостинг, подготовил все.

Как сделать многостраничный сайт без PHP?
Подскажите, как создать многостраничный сайт 10-15 однотипных страниц и залить на хостинг? С.

WPF Переход по страницам и переход со страницы на главную форму
У меня есть главная страница (форма), есть еще одна страница. Хочу при нажатии на кнопку в главной.

Думаю тебе тут пригодится использование jQuery. В зависимости от выбранной страницы подгружай с помощью ajax запроса содержимое в нужный блок. Думаю так

да я знаю, что здесь javascript самый простой вариант, но пока без знаний его,есть ли какая то другая возможность перехода на другие страницы?

Все способы перейти на другую страницу с помощью JavaScript. Есть множество способов, как сделать переход по ссылке с помощью JavaScript!

Все способы перехода по ссылке в JavaScript с примерами

Перейти по ссылке используя document.location.href

Для перехода на новую страницу будем использовать document.location.href

Все просто! Добавляем например onclick(не забываем поменять двойные на одинарные и наоборот внутри, в зависимости от наружных) :

Результат использования document.location.href в ссылке

Перейти по ссылке используя document.location.replace

Результат использования для перехода по ссылке document.location.replace

Перейти по ссылке используя javascript: document.location.href

Результат использования javascript: document.location.href в ссылке:

Использование функции javascript для перехода по ссылке

Есть возможность использовать переход по ссылке с помощью функции javascript

Пишем вот такую функцию, внутрь помещаем ссылку:

А уже где-то ниже помещаем тело самой ссылки

Использование функции javascript для перехода по ссылке и onclick

Тоже самое, что и выше идущий вариант, вместо javascript в ссылке ставим onclick

Ссылка href без перехода по ссылке

Вообще. это поисковый запрос. script href без перехода - я немного не понимаю. если не требуется перехода по ссылке href - напрашивается вопрос - вам зачем вообще тогда содержимое в href , зачем вообще атрибут href , просто можно удалить href и повестить либо функцию на onclick, либо что-то прямо на тег :

Предположим. Что есть какая-то ссылка с атрибутом href и каким то внутри содержимым, в смысле ссылкой! Но мы хотим, чтобы ссылка не срабатывала, т.е. пользователь не переходил по ссылке href, после выполнения функции onclick ставим return false; :

Читайте также: