31.03.2019, 19:38
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Malleys, неужели сложно к этому скрипту добавить следующий функционал,
Сообщение от Malleys
|
<!DOCTYPE html>
<head><title></title></head>
<body>
<style type="text/css">
body { font: 14px normal Times, serif; }
a { text-decoration: none; color: #5a5aff; }
a:hover { color: #5a96ff; }
a.act { color: #4c994c; }
span.act { color: #4c994c; }
</style>
<div id="msgText">
<a href="001.html">Ссылка 001</a><br/>
<a href="/001.html">Ссылка /001</a><br/>
<a href="css/001.html">Ссылка css/001</a><br/>
<a href="/css/001.html">Ссылка /css/001</a><br/>
<a href="002.html">Ссылка2</a><br/>
<a href="003.html">Ссылка3</a><br/>
<a href="004.html">Ссылка4</a><br/>
<a href="005.html">Ссылка5</a><br/>
<a href="006.html">Ссылка6</a><br/>
<a href="007.html">Ссылка7</a><br/>
</div>
<script type="text/javascript">
(function() {
var links = Array.prototype.slice.call(document.links);
for(var index = 0, length = links.length, link; index < length; index++) {
link = links[index];
if(link.href === location.href) {
var p = document.createElement("span");
p.className = "act";
p.innerHTML = link.innerHTML;
link.parentNode.replaceChild(p, link);
}
}
})();
</script>
</body>
</html>
|
массив с именами классов, скрипт после замены тега <а> на спан обрезает адрес полученный через location, с конца до первого слеша находит совпадение среди ссылок и присвает класс который второй в массиве, потом обрезает адрес до второго слеша и присваивает следующий класс из массива и так далее и обернуть в конструкцию DOMContentLoaded
|
|
31.03.2019, 21:34
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
надо подсветить первые три ссылки в каждом див'е
|
div > a:nth-of-type(-n + 3) { background: yellow; }
Вы посмотрели хоть какие-нибудь материалы, которые я посоветовал вам для изучения CSS?
|
Сообщение от Блондинка
|
|
после замены тега <а> на спан обрезает адрес полученный через location, с конца до первого слеша находит совпадение среди ссылок и присвает класс который второй в массиве, потом обрезает адрес до второго слеша и присваивает следующий класс из массива и так далее
|
Вы просите найти части URL (это location.href), которые я подсветил в следующем примере... но кроме первой (которую вы заменили на <span>) таких совпадении не происходит!
<p><s>https://example.com/<mark>textbook/css/css-filters-2/properties/backdrop-filter</mark></s></p>
<p>https://example.com/textbook/<mark>css/css-filters-2/properties/backdrop-filter</mark></p>
<p>https://example.com/textbook/css/<mark>css-filters-2/properties/backdrop-filter</mark></p>
<p>https://example.com/textbook/css/css-filters-2/<mark>properties/backdrop-filter</mark></p>
<p>https://example.com/textbook/css/css-filters-2/properties/<mark>backdrop-filter</mark></p>
|
|
31.03.2019, 23:05
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Malleys,
вот код страницы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>transform</title>
<style type="text/css">
body { font: 14px normal Times, serif; }
div { border: 1px solid #999; padding: 5px; margin: 5px; }
a:active, a:link { color: #005aff; text-decoration: none; }
a.:visited { color: #5995ff; text-decoration: none; }
a:hover { color: #7a00ff; text-decoration: none; }
.efg { color: #167016; }
.def { color: #127a12; }
.cde { color: #0d850d; }
.bcd { color: #068f06; }
.abc { color: #009900; }
</style>
<script>
var classes = ['act', 'abc', 'bcd', 'cde', 'def', 'efg'];
(function() {
var links = Array.prototype.slice.call(document.links);
for(var index = 0, length = links.length, link; index < length; index++) {
link = links[index];
if(link.href === location.href) {
var p = document.createElement("span");
p.className = "act";
p.innerHTML = link.innerHTML;
link.parentNode.replaceChild(p, link);
}
}
})();
</script>
</head>
<body>
<div class="menu" id="menu1">
<a href="/razdel/">razdel/</a><br>
<a href="/razdel/01.html">page-01</a><br>
<a href="/razdel/02.html">page-02</a><br>
<a href="/razdel/03.html">page-03</a>
<div class="menu" id="menu2">
<a href="/razdel/podrazdel/">podrazdel/</a><br>
<a href="/razdel/podrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/03.html">page-03</a>
<div class="menu" id="menu3">
<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
<div class="menu" id="menu4">
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
</div>
</div>
</div>
</div>
</body>
</html>
а вот адрес сайт.ru/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html"
На этой странице надо найти ссылки соответствующие текущему адресу, через location href обрезать окончания адреса до слеша и присвоить классы из массива, так понятно будет?
|
|
01.04.2019, 00:18
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
надо найти ссылки соответствующие текущему адресу, через location href обрезать окончания адреса
|
<!doctype html>
<html>
<head>
<title>transform</title>
<style>
body { font: 14px normal Times, serif; }
div { border: 1px solid #999; padding: 5px; margin: 5px; }
a { color: #005aff; text-decoration: none; }
a:visited { color: #5995ff; text-decoration: none; }
a:hover { color: #7a00ff; text-decoration: none; }
.act { color: initial; pointer-events: none; }
.efg { color: #167016; }
.def { color: #127a12; }
.cde { color: #0d850d; }
.bcd { color: #068f06; }
.abc { color: #009900; }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var links = Array.prototype.slice.call(document.links);
var classes = ["act", "abc", "bcd", "cde", "def", "efg"];
var href = location.href;
for(var index = 0, length = links.length, link; index < length; index++) {
link = links[index];
for(var level = 0, part = href; level < classes.length; level++) {
if(link.href === part || link.href === part + "/") {
link.className = classes[level];
break;
}
part = part.replace(/\/[^/]*\/?$/, "");
}
}
});
</script>
</head>
<body>
<div class="menu" id="menu1">
<a href="/razdel/">razdel/</a><br>
<a href="/razdel/01.html">page-01</a><br>
<a href="/razdel/02.html">page-02</a><br>
<a href="/razdel/03.html">page-03</a>
<div class="menu" id="menu2">
<a href="/razdel/podrazdel/">podrazdel/</a><br>
<a href="/razdel/podrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/03.html">page-03</a>
<div class="menu" id="menu3">
<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
<div class="menu" id="menu4">
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
</div>
</div>
</div>
</div>
</body>
</html>
Так подходит?
Широкие однако у вас интересы... Теперь учебник про подподподразделы пишете!
|
Сообщение от Блондинка
|
|
так понятно будет?
|
Откуда мне знать было, что ссылки надо читать справа налево!
Последний раз редактировалось Malleys, 02.04.2019 в 11:19.
|
|
01.04.2019, 10:23
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Malleys,
если честно то не знаю, на странице почему то не подсвечивает,
P. S. я походу опять не так объяснила, ссылка на саму себя должна заменится на спан которому надо присвоить класс который стоит первым в массиве
степень вложенности может быть намного больше, порядка 12-15, до 20 (/папка/папка/.../папка/ и т.д.)
|
|
01.04.2019, 11:26
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
мне почему-то казалось что фраза (ну или пост)
|
Сообщение от Блондинка
|
|
неужели сложно к этому скрипту добавить следующий функционал
|
автоматически подразумевает замену тега <а> на спан |
|
01.04.2019, 11:29
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Вы поменяли 33 строчку... хотя это вы попытались пошутить и неожиданно спалились, что вы знаете тонкости RegExp!
Какой баг!!! Я проверял этот скрипт на реальных переходах по ссылке (сервер же можно настроить так, чтобы он отвечал на все запросы одним ответом) Однако ваш ларёк теряет обратные слеши, если создавать файл через их сайт, однако если загрузить файл, то не теряет! Вам надо сохранить скрипт в файл, и затем загрузить на ларёк!
Последний раз редактировалось Malleys, 01.04.2019 в 11:53.
|
|
01.04.2019, 12:27
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Malleys,
сейчас загрузила страницу, обратные слеши появились, ссылка на саму себя заменилась на текст, но ссылки на главные папок почему то не подсвечивает, и в моём браузере и в опере классик
|
|
01.04.2019, 12:44
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
А почему вы решили, что если правило написать ниже в CSS, то оно отменяет те, которые выше?
a:active, a:link замените на a
Вы не ответили на вопрос... Вы посмотрели видео/статьи про CSS?
|
Сообщение от Блондинка
|
|
ссылки на главные папок почему то не подсвечивает
|
Вы хоть какие-нибудь усилия предприняли, чтобы понять почему оно не подсвечивает? Скрипт уже расставил ваши классы!
Последний раз редактировалось Malleys, 01.04.2019 в 12:48.
|
|
01.04.2019, 13:50
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Сообщение от Malleys
|
|
Вы не ответили на вопрос... Вы посмотрели видео/статьи про CSS?
|
если честно, то не до конца, пока в процессе изучения/запоминания |
|
|
|
