Цитата:
upd. это была временная ссылка, во всяком случае открыть результат с новом окне можно умудриться. Тут со смартфона вполне удобно просматривать результат: http://embed.plnkr.co/sEkReyGqTJvgPLIdULKV/ Цитата:
|
И как сейчас исправить ситуацию?
<!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, .xyz4, .xyz5, .xyz6 .xyz7 { color: #28cc28; }
</style>
<script>
document.addEventListener('DOMContentLoaded',function() {
//const uriWithoutParams=location.pathname.split(/[#|?]+/i).shift();
var uriWithoutParams = '/menu/css/css3/transform.html'.split(/[#|?]+/i).shift();
var extension = uriWithoutParams.split('.').pop();
var uriParts = uriWithoutParams.replace('.' + extension, '').split('/').filter(function(part) {
return part.length;
});
var getClassName = function(index) {
return 'xyz' + index;
};
var maxPostfix = 5;
uriParts.forEach(function(uri, index) {
uri = '/' + uriParts.slice(0, ++index).join('/') + '.' + extension;
index = maxPostfix - (uriParts.length - index);
if (index <= 0)
return;
var className = getClassName(index);
[].forEach.call(document.querySelectorAll('a[href="' + uri + '"]'), function(node) {
node.classList.add(className);
if (index !== maxPostfix)
return;
var textNode = document.createElement('span');
textNode.textContent = 'someText';
textNode.className = className;
node.parentNode.insertBefore(textNode, node);
node.parentNode.removeChild(node);
});
});
});
</script>
</head>
<body>
<div class="menu" id="menu1">
<a href="/menu/html.html">HTML</a>
<a href="/menu/css.html">CSS</a>
<a href="/menu.html">menu</a>
<a href="/js.html">JS</a>
</div>
<div class="menu" id="menu2">
<a href="/menu/css/css3.html">CSS3</a><br/>
<div>
<a href="/menu/css/css3/transform.html">transform</a><br/>
<a href="/menu/css/css3/transform-origin.html">transform-origin</a><br/>
<a href="/menu/css/css3/transform-style.html">transform-style</a><br/>
</div>
</div>
</body>
</html>
Я же писала что ссылка "transform" должна стать просто текстом "transform" зачем 36 строка? Причём тут 'someText'? |
Цитата:
Прочитайте про форматирование на форуме и выполнение кода: http://javascript.ru/formatting |
Цитата:
|
а вот ответ
Цитата:
|
Цитата:
«someText» замените на нужное значение. Я выпиливаюсь из топика, так можно до Китайской Пасхи продолжать. |
Просто ссылка должна заменится на спан с тем же текстом, а не вставлять новый какой-то текст...
|
Блондинка, вместо 'someText' вставьте node.textContent.
|
Фух, наконец то всё работает...
|
Цитата:
Цитата:
|
MC-XOBAHCK,
твои слова просто улыбнули, и напомнили кучу анекдотов про блонди, так что извинения излишни. |
Nexus, Malleys, помогите исправить этот скрипт
<script>
document.addEventListener('DOMContentLoaded',function() {
//const uriWithoutParams=location.pathname.split(/[#|?]+/i).shift();
var uriWithoutParams = '/menu/css/css3/transform.html'.split(/[#|?]+/i).shift();
var extension = uriWithoutParams.split('.').pop();
var uriParts = uriWithoutParams.replace('.' + extension, '').split('/').filter(function(part) {
return part.length;
});
var getClassName = function(index) {
return 'xyz' + index;
};
var maxPostfix = 5;
uriParts.forEach(function(uri, index) {
uri = '/' + uriParts.slice(0, ++index).join('/') + '.' + extension;
index = maxPostfix - (uriParts.length - index);
if (index <= 0)
return;
var className = getClassName(index);
[].forEach.call(document.querySelectorAll('a[href="' + uri + '"]'), function(node) {
node.classList.add(className);
if (index !== maxPostfix)
return;
var textNode = document.createElement('span');
textNode.textContent = node.textContent;
textNode.className = className;
node.parentNode.insertBefore(textNode, node);
node.parentNode.removeChild(node);
});
});
});
</script>
|
9-12 строчки заменить на массив ['xyz1', 'xyz2', 'xyz3', 'xyz4', 'xyz5']
|
как сделать массив?
|
Вы имеете в виду так?
var getClassName = function(index) {
return ['xyz1', 'xyz2', 'xyz3', 'xyz4', 'xyz5'][index];
};
А я думаю так!
function getClassName(index) {
return 'xyz' + (index + 1);
};
Вам не учебник надо создавать, а учебник надо читать! https://learn.javascript.ru/ Вы уж не сердитесь, но вы такое читали? И почему вы всегда всё пишете в один столбик? И даже если вам в примере напечатают код с отступами, вы все сворачиваете в одну сплошную простыню! (помните про маятник!) Рулоны кода! |
Цитата:
|
Nexus,
насколько я поняла, если создать массив, то спан должен быть последним в массиве? возможно ли сделать чтобы было наоборот, сначала в массиве идёт наибольшее вложение и дальше по убыванию? и второй вопрос, можно ли сделать чтобы скрипт автоматически считал количество объектов в массиве и вставлял в 12 строку? |
Цитата:
Цитата:
Цитата:
|
1. Ссылка которая заменяется на спан, тоесть самая последняя (с макс вложенностью.
3. В массиве (пост 55), объектов(ссылок), да переменной maxPostfix. |
9-11 строчки если заменить на массив
var getClassName = function(index) {
return ['xyz1', 'xyz2', 'xyz3', 'xyz4', 'xyz5'][index];
};
в котором пять объектов-ссылок с именами классов xyz* |
Nexus, ?
|
Цитата:
|
Блондинка, не до конца понятно, что вы хотите, а что-то править основываясь на догадках не хочу.
Вчера какое-то представление о вашей цели было, сегодня нет. Напишите, что конкретно вы хотите получить без использования слов "массив", "объект" и т.п. |
что бы ссылкам присваивался класс не xyz с номером 1-20 а абсолютно разные имена классов, xyz, zyx, abc, cba, и так далее, я просто в скрипте пишу нужные имена классов начиная от наибольшей вложенности, плюс скрипт считает сколько я внесла имен классов и это значение присваивает переменной maxPostfix.
|
Блондинка, сразу бы так...
Не тестировал.
var classes = ['latest', 'second', 'first'];
document.addEventListener('DOMContentLoaded', function() {
//const uriWithoutParams=location.pathname.split(/[#|?]+/i).shift();
var uriWithoutParams = '/menu/css/css3/transform.html'.split(/[#|?]+/i).shift();
var extension = uriWithoutParams.split('.').pop();
var uriParts = uriWithoutParams.replace('.' + extension, '').split('/').filter(function(part) {
return part.length;
});
var reversedClasses = classes.reverse();
var getClassName = function(index) {
return reversedClasses[index];
};
var maxPostfix = classes.length;
uriParts.forEach(function(uri, index) {
uri = '/' + uriParts.slice(0, ++index).join('/') + '.' + extension;
index = maxPostfix - (uriParts.length - index);
if (index <= 0)
return;
var className = getClassName(index);
[].forEach.call(document.querySelectorAll('a[href="' + uri + '"]'), function(node) {
node.classList.add(className);
if (index !== maxPostfix)
return;
var textNode = document.createElement('span');
textNode.textContent = node.textContent;
textNode.className = className;
node.parentNode.insertBefore(textNode, node);
node.parentNode.removeChild(node);
});
});
});
|
Nexus,
а можно вопросик? что значит эта строчка var uriWithoutParams = '/menu/css/css3/transform.html'.split(/[#|?]+/i).shift(); может правильнее было бы заменить на что-то типа location host? |
Блондинка, это тестовый текущий путь. Стройкой выше был закомментирован правильный вариант.
|
Nexus,
тоесть если я правильно поняла третью строку-коментирование надо удалить а четвёртую заменить на var uriWithoutParams=location.pathname.split(/[#|?]+/i).shift(); |
Блондинка, в начале третье строки две кривые черточки нужно удалить, а в начале четвертой наоборот - добавить (ну или удалить эту строку вообще).
|
Цитата:
|
document.addEventListener('DOMContentLoaded', function() {
const uriWithoutParams=location.pathname.split(/[#|?]+/i).shift();
var extension = uriWithoutParams.split('.').pop();
вроде так |
Malleys,
не может быть такого ;) |
Блондинка, "const" на "var" замените, чтоб не выделялся.
|
Nexus,
:thanks: |
блин, походу я опять накосячила тут
|
Блондинка, сочувствую.
|
Цитата:
Может вам хотя бы сразу сделать, чтобы выводило все свойства, хотя бы даже без примеров, просто страница с меню и название, а то куда сейчас не нажми, Error 404: Запрошенная страница или файл не найдены на этом сайте. Зато у нас есть: ХХХ. А то вы делаете для одной страницы, а потом смотришь, а на другой не будет работать, или не так как надо и опять всё переделывать! Вот вам ссылка на объект с описанием свойств CSS: https://github.com/LeaVerou/css3test...pages/tests.js Я вам уже об этом писал. |
Malleys,
причём тут error? есть сайт, на нём есть главная страница, пусть будет /index.html или /мой_сайт.html или ещё как названа неважно, также в папке есть главная страница с каким либо именем, скрипт должен подсвечивать ссылки имеющие отношение к текущему пути, независимо от того как названа главная страница папки и независимо от того как прописан адрес, абсолютный или относительный с http://moi_sait.ru или без, с указанием названия страницы или просто scr="/" речь идет только о подсветке пунктов меню которые имеют отношение к текущему пути и о подсветке текущей страницы ссылку на которую заменили на спан |
Блондинка, не знаю в какой строке, но следующий участок должен выглядеть так:
var getClassName = function(index) {
return reversedClasses[index-1];
};
Весь путь у вас не подсвечивается, потому что у вас страницы разделов как попало названы. /menu/css/css3/transform.html /menu/css/css3/ /menu/index.html /menu.html Сложно написать скрипт, который будет подсвечивать ссылки, имеющие отношение к текущему пути, когда страницы разделов именуются по велению левой пятки. |
Nexus главная страница раздела может иметь только два имени, или .../css3/index.html или .../css3/css3.html и соответственно может сокращаться до .../css3/ без index.html
|
| Часовой пояс GMT +3, время: 14:36. |