|
можно ли изменить цвет ссылок? и одну ссылку заменить на текст?
есть страничка .html которая находиться в папке css3 а эта папка в другой папке css, сама страница имеет такой адрес /css/css3/transform.html возможно ли сделать чтобы ссылка на саму себя заменялась текстом и была другого цвета, как у класса xyz3, ссылка на папку css3 стала цвета как у класса xyz2, а ссылка на папку css стала цвета как у класса xyz1?
вот сама страничка
<!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>
</head>
<body>
<style type="text/css">
body { font: 14px normal Times, serif; }
div { border: 1px solid #ccc; padding 5px; margin: 5px; }
a { text-decoration: none; color: #3c3vff; }
.xyz1 { color: #009900; }
.xyz2 { color: #11b311; }
.xyz3 { color: #28cc28; }
</style>
<div>
<a href="/html.html">HTML</a>
<a href="/css.html">CSS</a>
<a href="/js.html">JS</a>
</div>
<div>
<a href="/css/css3.html">CSS3</a><br/>
<div>
<a href="/css/css3/transform.html">transform</a><br/>
<a href="/css/css3/transform-origin.html">transform-origin</a><br/>
<a href="/css/css3/transform-style.html">transform-style</a><br/>
</div>
</div>
</body>
</html>
|
Можно. Но тебе придётся сверстать все эти страницы и установить нужный класс для каждой ссылки на каждой странице.
|
Цитата:
Цитата:
let page = window.location.pathname;
let links = document.querySelectorAll('a');
for (let i = 0; i < links.length; i++) {
if (links[i].pathname == page) {
links[i].outerHTML = '<span class="xyz3">' + links[i].textContent + '</span>';
}
}
Остальное тоже можно реализовать и там не сложно, но это просто жесть с такими путями... |
MC-XOBAHCK,
Твой скрипт не хочет выполнять задачу
<!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>
</head>
<body>
<style type="text/css">
body { font: 14px normal Times, serif; }
div { border: 1px solid #ccc; padding: 5px; margin: 5px; }
a { text-decoration: none; color: #3c3vff; }
.xyz1 { color: #009900; }
.xyz2 { color: #11b311; }
.xyz3 { color: #28cc28; }
</style>
<body>
<script>
let page = window.location.pathname;
let links = document.querySelectorAll('a');
for (let i = 0; i < links.length; i++) {
if (links[i].pathname == page) {
links[i].outerHTML = '<span class="xyz3">' + links[i].textContent + '</span>';
}
}
</script>
<div>
<a href="/html.html">HTML</a>
<a href="/css.html">CSS</a>
<a href="/js.html">JS</a>
</div>
<div>
<a href="/css/css3.html">CSS3</a><br/>
<div>
<a href="/css/css3/transform.html">transform</a><br/>
<a href="/css/css3/transform-origin.html">transform-origin</a><br/>
<a href="/css/css3/transform-style.html">transform-style</a><br/>
</div>
</div>
</body>
</html>
Ой, двоеточие пропустила после padding |
Блондинка, а ты его поставь перед закрывающимся тегом body или оберни в конструкцию DOMContentLoaded:
document.addEventListener('DOMContentLoaded', function() {
let page = window.location.pathname;
let links = document.querySelectorAll('a');
for (let i = 0; i < links.length; i++) {
if (links[i].pathname == page) {
links[i].outerHTML = '<span class="xyz3">' + links[i].textContent + '</span>';
}
}
});
https://learn.javascript.ru/onload-ondomcontentloaded |
Цитата:
Это вполне может быть какой-то учебник либо набор шпаргалок. Если страниц будет много, то без backend'а будет туго. |
MC-XOBAHCK,
Так?
<!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 #ccc; padding: 5px; margin: 5px; }
a { text-decoration: none; color: #3c3vff; }
.xyz1 { color: #009900; }
.xyz2 { color: #11b311; }
.xyz3 { color: #28cc28; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
let page = window.location.pathname;
let links = document.querySelectorAll('a');
for (let i = 0; i < links.length; i++) {
if (links[i].pathname == page) {
links[i].outerHTML = '<span class="xyz3">' + links[i].textContent + '</span>';
}
}
</script>
</head>
<body>
<div class="menu" id="menu1">
<a href="/html.html">HTML</a>
<a href="/css.html">CSS</a>
<a href="/js.html">JS</a>
</div>
<div class="menu" id="menu2">
<a href="/css/css3.html">CSS3</a><br/>
<div>
<a href="/css/css3/transform.html">transform</a><br/>
<a href="/css/css3/transform-origin.html">transform-origin</a><br/>
<a href="/css/css3/transform-style.html">transform-style</a><br/>
</div>
</div>
</body>
</html>
Всё равно не хочет выполнять |
Nexus,
Ну что-то типа учебника па хатеэмэл и цеэсэс, и нада для второга сайта, про таксономию растений, но там адреса еще длиннее, Домен: /Царство/Подцарство/Отдел/Класс/Надпорядок/Порядок/Семейство/Подсемейство/триба/род/ |
Цитата:
Другое дело, если вы хотели обратить внимание на мифический CSS3, про который некоторые странные люди жужжат себе под нос, но ничего не могут объяснить или показать, поскольку такого не существует и нет спецификации, определяющей такое понятие! Но при чём тут цвет волос? Или же вы хотели обратить внимание на то, что модуль первой версии (а CSS Transforms сейчас именно первой версии) находится в папке со странным названием. Более практичней было бы распределить модули по папкам. Тогда сразу видна вся история развития модуля и папки имеют более осмысленные названия! Но при чём тут цвет волос? Ссылка перестаёт быть ссылкой, если у неё удалить атрибут href. (Скрипт перед закрывающим тегом body)
[...document.links].forEach(link => {
if(location.pathname === link.pathname)
link.removeAttribute("href");
});
В зависимости от того, куда указывает ссылка, её можно по разному раскрашивать!
a {
text-decoration: none;
color: #3c3cff;
}
a[href*="css"] {
color: #009900;
}
a[href*="css3"] {
color: #11b311;
}
/* это не работает ни в каком браузере(март 2019), поэтому пока нужен временный скрипт */
a:local-link {
color: #28cc28;
pointer-events: none;
color: inherit;
}
/* для временного скрипта */
a:not([href]) {
color: #28cc28;
pointer-events: none;
color: inherit;
}
Цитата:
|
Цитата:
Отделить контент от представления можно и это будет правильно, но как это противоречит тому, что вы процитировали? |
| Часовой пояс GMT +3, время: 17:02. |
|