Цитата:
Оглавление
Оглавление
.....
Том 1
.....
|
Цитата:
|
Цитата:
Например, раздел Grid Layout содержит все свойства из соответствующей спецификации. Я думаю, что учебник должен обращать на это внимание... Тем более, что свойства из одной спеки работают обычно вместе, а когда у вас свалено всё в одну кучу, то непонятно, что за свойство gap, а когда оно находится в соответствующем разделе, то и соответствующий общий пример можно подобрать! Это стоит того, ведь некоторые свойства не работают с другими (так сказать отменяют) |
Malleys,
собственно первая часть вопроса заключается в том, как исправить твой скрипт Цитата:
<a href="001.html"> а если указать адрес со слешем <a href="/001.html">или абсолютный адрес <a href="http://сайт.ru/001.html">то твой скрипт почему то не работает |
<!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>
Проверил пример... работает как следует! Но очень зависит, откуда вы запускаете... Цитата:
Цитата:
Какой баг!!! <!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"> и ларк не переваривает! |
Malleys,
а вторая часть вопроса состоит в том, если страница находится не в корне сайта а папке с большой вложенностью, где степень вложенности порядка 12-15 <a href="/папка/папка/папка/папка/папка/папка/папка/папка/папка/папка/папка/папка/папка/папка/папка/001.html"> как подсветить ссылки на эти папки, или index.html или одноименную с папкой страницу (например css3.html) присвоив каждой свой класс (например а1 б2 в3 г4 д5 и т.д.) |
Цитата:
Вот ещё вариант...
function setNestingLevel(link) {
var nestingLevel = new URL(link.href).pathname.split("/").length - 1;
link.classList.add("level-" + nestingLevel);
}
Вы уж сами выберите ссылку и передайте её в функцию... |
как с помощью css можно определить что ссылка имеет отношение к текущему пути? это если не ошибаюсь объект "location", вот скрипт
<!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; }
span.xyz3, span.xyz4, span.xyz5, span.xyz6 span.xyz7 { color: #28cc28; }
</style>
<script>
var classes = ['xyz4', 'xyz3', 'xyz2', 'xyz1'];
document.addEventListener('DOMContentLoaded', function() {
var uriWithoutParams=location.pathname.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-1];
};
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);
});
});
});
</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>
все работает если указывать ссылку на одноимённую с папкой страницу как в примере выше, но если указать ссылку на главную (index.html) в папке то не работает, правда я не проверяла что будет если указать абсолютный путь (с http://) |
Блондинка,
Цитата:
Цитата:
Цель написать учебник, кажется у вас ради цели, вы уже решаете целый месяц, как подчеркнуть ссылку... Чему же вы хотите научить своих последователей? Есть куча справочников, которые объясняют, что такое border-radius, или другое хорошо поддерживаемое свойство. Просто показать, что делает border-radius, уже не интересно никому. Или точней, вы вряд ли кого-то удивите, показав, что оказывается там можно уголки закруглять! А вот если у вас есть идея, как можно добиться какого-то интересного эффекта, и оно легко получается при помощи исследуемого свойства, то вы сделали открытие! Вы можете написать статью в своём блоге (вы можете завести блог), на стене в своей социальной сети, снять видео (вы можете завести канал), и в конечном счёте это ваш материал для вашей книги! CSS шести или десятилетней давности является хорошо изученной темой, может стоит перевести фокус своего исследования на менее изученные вещи. Например на вещи, которые станут в CSS доступны для рядового верстальщика в будущем или они мало известны! Вот, например, две вещи, которые вы можете исследовать (их сейчас легко исследовать, поскольку существует реализация в Chrome под флагами, вам не нужно писать полифилл) По моему это очень интересные темы для CSS, если вы напишите статью (не надо целую книгу!) на эту тему с интересными примерами, то вы сделаете вклад в развитие CSS-сообщества. Однако вам прежде всего стоит посмотреть на пример девушек, которые тоже увлекаются CSS (они всё-таки профессионалы своего дела!): Ana Tudor, Lea Verou, Sara Soueidan. Почитайте их статьи, посмотрите их видео на YouTube. Вот пример качественного современного учебника по CSS https://css-tricks.com/ (А вообще-то про HTML, CSS и JavaScript) UPD А прежде всего вам нужно поучиться у этих людей, почитать учебник, ссылку на который я привёл. Забудьте пока про свой учебник... Разберите, как работают уже готовые примеры. Придумывайте что-нибудь своё, но только такое, чтобы это можно было сделать в разумные временные рамки! Сделайте себе план, что изучать, что смотреть по данной тематике CSS, когда изучать. |
а причём тут css3? если я в примере вместо "css3" напишу "razdel3" это что нибудь изменит?
я как-бы не вижу связи между подсветкой пунктов меню и учебником, поскольку скрипт подсветки меню можно использовать на сайте абсолютно любой тематики, а не только исключительно на сайте тематики веб |
| Часовой пояс GMT +3, время: 21:43. |