Простой пример псевдоссылок
Не часто, но бывают иногда случаи добавить псевдоссылки на страницы сайта. Сегодня я что-то не смог найти старый JS код, который ранее ставил на свои сайты. Начал гуглить и нашёл интересный и просто код для псевдоссылок. Пример в полной новости.
Источник
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Псевдоссылки</title>
<style>
/* Стили, только для наглядности */
/* В реальной жизни нужно юзать собственные */
[data-innerlink],
[data-extlink] {
cursor: pointer;
color: #ad1da5;
text-decoration: underline;
}
[data-innerlink]:hover,
[data-extlink]:hover {
text-decoration: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
// Псевдо-ссылки
// Внутренние
$('body').on('click', '[data-innerlink]', function() {
window.location.href = ($(this).data('innerlink'));
});
// Внешние
$('body').on('click', '[data-extlink]', function() {
window.open($(this).data('extlink'));
});
});
</script>
</head>
<body>
<span data-innerlink="http://goo.gl/">Внутренняя Ссылка span</span><br>
<div data-innerlink="http://goo.gl/">Внутренняя Ссылка div</div><br>
<img data-innerlink="http://goo.gl/" src="http://lorempixel.com/200/400" alt="Внутренняя Ссылка img" title="Внутренняя Ссылка img"><br>
<span data-extlink="http://goo.gl/">Внешняя Ссылка span</span><br>
<div data-extlink="http://goo.gl/">Внешняя Ссылка div</div><br>
<img data-extlink="http://goo.gl/" src="http://lorempixel.com/200/400" alt="Внешняя Ссылка img" title="Внешняя Ссылка img"><br>
</body>
</html>Источник
Похожие статьи:
Комментарии: