Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.03.2019, 00:29
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

можно ли изменить цвет ссылок? и одну ссылку заменить на текст?
есть страничка .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>
Ответить с цитированием
  #2 (permalink)  
Старый 01.03.2019, 02:50
Интересующийся
Отправить личное сообщение для EvgeniySaschenko Посмотреть профиль Найти все сообщения от EvgeniySaschenko
 
Регистрация: 25.11.2018
Сообщений: 15

Можно. Но тебе придётся сверстать все эти страницы и установить нужный класс для каждой ссылки на каждой странице.
Ответить с цитированием
  #3 (permalink)  
Старый 01.03.2019, 02:54
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 352

Сообщение от Блондинка
есть страничка .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, 04:03
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

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

Последний раз редактировалось Блондинка, 01.03.2019 в 04:08.
Ответить с цитированием
  #5 (permalink)  
Старый 01.03.2019, 12:16
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 352

Блондинка, а ты его поставь перед закрывающимся тегом 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
Ответить с цитированием
  #6 (permalink)  
Старый 01.03.2019, 12:30
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,937

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

Если страниц будет много, то без backend'а будет туго.
Ответить с цитированием
  #7 (permalink)  
Старый 04.03.2019, 08:45
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

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, 09:07
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

Nexus,
Ну что-то типа учебника па хатеэмэл и цеэсэс, и нада для второга сайта, про таксономию растений, но там адреса еще длиннее, Домен: /Царство/Подцарство/Отдел/Класс/Надпорядок/Порядок/Семейство/Подсемейство/триба/род/
Ответить с цитированием
  #9 (permalink)  
Старый 06.03.2019, 15:20
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 720

Сообщение от 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'а будет туго.
А кто запретил отделить содержимое от его представления?
Ответить с цитированием
  #10 (permalink)  
Старый 06.03.2019, 15:32
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,937

Сообщение от Malleys
А кто запретил отделить содержимое от его представления?
Откровенно говоря не понял, что вы имеете ввиду.

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция для перевода размера из байтов в понятный для человека формат Антон Крамолов Ваши сайты и скрипты 4 05.04.2013 15:42
Изменить цвет при клике AndreyS jQuery 3 07.10.2012 15:27
Вопрос по относительному позиционированию DIV XPOMOB (X)HTML/CSS 11 15.07.2009 16:02
Можно ли одновременно изменить фон и текст в поле? Bad Request Events/DOM/Window 12 25.09.2008 22:10