Форум

Блондинка · #1 (**permalink**) 01.03.2019, 01:29

есть страничка .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>

EvgeniySaschenko · #2 (**permalink**) 01.03.2019, 03:50

Можно. Но тебе придётся сверстать все эти страницы и установить нужный класс для каждой ссылки на каждой странице.

MC-XOBAHCK · #3 (**permalink**) 01.03.2019, 03:54

Сообщение от Блондинка

есть страничка .html которая находиться в папке css3 а эта папка в другой папке css, сама страница имеет такой адрес /css/css3/transform.html

Внатури блондинка : )

Сообщение от Блондинка

сделать чтобы ссылка на саму себя заменялась текстом и была другого цвета, как у класса xyz3

Скрипт только для этой части:

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>';
    }
}

Остальное тоже можно реализовать и там не сложно, но это просто жесть с такими путями...

Блондинка · #4 (**permalink**) 01.03.2019, 05:03

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

MC-XOBAHCK · #5 (**permalink**) 01.03.2019, 13:16

Блондинка, а ты его поставь перед закрывающимся тегом 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

Nexus · #6 (**permalink**) 01.03.2019, 13:30

Сообщение от MC-XOBAHCK

но это просто жесть с такими путями...

Что с ними не так?
Это вполне может быть какой-то учебник либо набор шпаргалок.

Если страниц будет много, то без backend'а будет туго.

Блондинка · #7 (**permalink**) 04.03.2019, 09:45

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>

Всё равно не хочет выполнять

Блондинка · #8 (**permalink**) 04.03.2019, 10:07

Nexus,
Ну что-то типа учебника па хатеэмэл и цеэсэс, и нада для второга сайта, про таксономию растений, но там адреса еще длиннее, Домен: /Царство/Подцарство/Отдел/Класс/Надпорядок/Порядок/Семейство/Подсемейство/триба/род/

Malleys · #9 (**permalink**) 06.03.2019, 16:20

Сообщение от MC-XOBAHCK

Сообщение от Блондинка

есть страничка с расширением html которая находится в папке css3, а эта папка в другой папке css, сама страница имеет такой адрес /css/css3/transform.html

Внатури блондинка : )

MC-XOBAHCK, так каким же образом классификация содержимого зависит от цвета волос? (Это вторая серия вопросов, на первую вы так и не ответили! https://javascript.ru/forum/showthre...771#post496771)

Другое дело, если вы хотели обратить внимание на мифический 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;
}

Сообщение от Nexus

Если страниц будет много, то без backend'а будет туго.

А кто запретил отделить содержимое от его представления?

Nexus · #10 (**permalink**) 06.03.2019, 16:32

Сообщение от Malleys

А кто запретил отделить содержимое от его представления?

Откровенно говоря не понял, что вы имеете ввиду.

Отделить контент от представления можно и это будет правильно, но как это противоречит тому, что вы процитировали?

Форум

Справочник

Discord чат

Курсы javascript