| |
|
|
| | Как сделать, чтобы при нажатии на ссылку типа <sup>2</sup>
источник под пунктом 2 был выделен как в Википедии.
например как на этой странице http://ru.wikipedia.org/wiki/Гай_Светоний_Транквилл#cite_note-arw.300-3 | |
| |
|
|
| |
|
|
| |
для: valeraquery
(15.07.2013 в 18:37)
| | | Источник в данном случае, это тот элемент, который породил событие, а вы имеете ввиду якорь по которому должен произойти переход. Это не источник, а скорее целевой элемент.
На него указывает свойство hash объекта location. Якорем могут служить id элементов, таким образом получаем ссылку на целевой элемент. Ну а дальше принцип может быть такой:
<style>
.mark {background: #ccc;}
</style>
function markHash(e) {
if(e.tagName=='A') {
target = location.hash.replace('#','');
document.getElementById(target).className = 'mark';
}
}
<body onclick="markHash(event.target || event.srcElement)">
<div id="a1"><sup>1</sup> Text</div>
<div id="a2"><sup>2</sup> Text</div>
<div id="a3"><sup>3</sup> Text</div>
<a href="?#a1">text 1</a>
<a href="?#a2">text 2</a>
<a href="?#a3">text 4</a>
|
ps. Это будет корректно работать в том случае, если переход на страницу осуществлен по адресу имеющему hash, так как вы и показали. | |
| |
|
|
| |
|
|
| |
для: confirm
(15.07.2013 в 19:32)
| | | Спасибо, почти что нужно.
Только вот чтобы произошло выделение нужно 2 раза нажать на ссылку.
Если нажать на a1, а потом на a2 будет выделен элемент помеченый a1.
А если нажать на a2, то будут выделены и первый и второй элементы.
Сюда я закачал этот скрипт можете посмотреть.
http://www.fayloobmennik.net/3017121
Как его доделать, чтобы было как мне нужно... для меня это слишком сложно.
Мои познания в JS слабы и очень давни.
Я имел ввиду, чтобы результат был как на указанной странице Википедии.
Можно с помощью onclick поменять фон, например, подобно тому как меняются картинки при наведении в весьма распространенном для обучения js скрипте а для перехода к ссылке использовать ссылку-якорь.
Только вот как сделать, чтобы менялся при нажатии фон в элементе div, а не картинка не могу найти...
Вообще мне интересны любые варианты того как это сделать, но я рассчитывал узнать хотябы это. Наверное он будет работать.
Как это сделать? Или другим способом если он проще и более совместим с броузерами.
А под источником я имел ввиду источник цитаты «Соболевский С. И. Историческая литература II—III вв. // История римской литературы в 2-х томах. — Т. 2. » или на что там была ссылка | |
| |
|
|
| |
|
|
| |
для: valeraquery
(16.07.2013 в 00:41)
| | | Я и написал, что корректная работа будет, если на страницу перешли по url содержащим hash. Иначе так и будет работать, по второму щелчку, так как в момент самого щелчка перехода по якорю еще не произошло, и url не содержит на этот момент времени hash.
Чтобы работало сразу по щелчку, нужно получать hash из значения атрибута href.
var target = null;
function markHash(e) {
if(e.tagName=='A') {
if(target) document.getElementById(target).className = '';
target = e.href.split('#').pop();
if(target) document.getElementById(target).className = 'mark';
}
}
|
Данный вариант получает hash из url ссылки, и снимает выделение с ранее выделенного элемента.
В данном примере и меняется цвет фона элемента указанный в стиле .mark. | |
| |
|
|
| |
|
|
| |
для: confirm
(16.07.2013 в 01:03)
| | | Спасибо все заработало, только выявил один СУЩЕСТВЕННЫЙ недостаток.
Если нажать на ссылку к которой не существует id на странице, то скрипт перестает работать.
Пример, чтобы было поянтнее я разместил по этой ссылке.
http://www.fayloobmennik.net/3036248
Там ссылка #a4 id которой нет на сайте.
Если на неё нажать, то скрипт перестает работать.
Как бы это исправить?
И еще хотелось бы, чтобы перейдя по ссылке типа test.htm#a3 с другой страницы или вставив в браузер элемент с id a3 выделялся. Сейчас только если нажать на на странице выделяется. | |
| |
|
|
| |
|
|
| |
для: valeraquery
(23.07.2013 в 04:20)
| | | Я же написал код, который отмечает элемент в случае url содержащего hash. Этот код должен быть как исполняемая функция при загрузке документа, а по переходу по якорю второй код. То есть типа такого:
<script>
var target = null;
//отмечает элемент при загрузке страницы и наличии hash
function setHash() {
target = location.hash.replace('#','');
if(e = document.getElementById(target)) e.className = 'mark';
else target = null;
}
//отмечает элемент при переходах по якорю
function markHash(e) {
if(e.tagName=='A') {
if(target) document.getElementById(target).className = '';
target = e.href.split('#').pop();
if(target && document.getElementById(target)) document.getElementById(target).className = 'mark';
}
}
</script>
<body onclick="markHash(event.target || event.srcElement)" onload="setHash()">
|
Код содержит проверку на наличие элемента на странице - if(e = document.getElementById(target)) и && document.getElementById(target). Хотя в функции markHash() такая проверка, это скорее нонсенс - битых ссылок на странице быть не должно. Если hash пришел извне, это еще можно объяснить, а вот битые ссылки на странице, это ваша забота. | |
| |
|
|
