Цитата:
|
Цитата:
|
ясно, я была права.
попробую объяснить по другому, есть папка .../css3/ в ней много страниц, среди которых есть ...css3/index.html и ...css3/css3.html(тоесть имена папки и страницы совпадают) ссылка в меню может вести только на главную(...css3/index.html) или oдноименную с папкой(...css3/css3.html) и вот одну из этих двух ссылок которые есть в меню надо выделить цветом, другими словами добавить класс |
Незнаю почему, но мне почему-то казалось что наличие главной страницы подразумевается по умолчанию
|
Цитата:
Я полагал, что именем файла страницы раздела будет файл, который имеет в названии название раздела. Т.е.: /menu/css/css3/transform.html /menu/css/css3.html /menu/css.html /menu.html |
Цитата:
|
Цитата:
Цитата:
Цитата:
И ещё, у вас где-то было "меняю на <span>", так вот, у вас всё-таки должен быть объект, описывающий, все свойства CSS, а то даже навигацию по сайту сделать, так это у вас сейчас проблема. А так генерируешь меню... и если ссылка указывает на текущее свойство, просто применяешь другие стили, или класс прибавляешь, или просто <span>. Цитата:
|
Цитата:
|
главная то одна, это index.html(php,js,xml и т.д.) но в зависимости от содержимого, в меню может быть ссылка одноимённая с названием раздела
/menu/css/css3/transform.html /menu/css/css3/index.html или /menu/css/css3/css3.html /menu/css/index.html или /menu/css/css.html /menu/index.html или /menu/menu.html очень надеюсь что не надо объяснять что такое абсолютный путь и относительный |
Цитата:
|
Цитата:
|
Malleys,
а можно поправить твой скриптик в 28 посте? а то он почему не хочет работать с абсолютными путями, и даже если впереди относительного адреса поставить слеш |
Цитата:
|
Цитата:
|
Хотя...
Цитата:
|
Чушь полнейшая, структура страницы, это не разделы сайта, разделы, это его содержание, основной контент. Вы хотя-бы о новых тегах HTML5 почитайте, о семантике, это как раз и определяет, что во что вы впихнуть собираетесь.
|
laimas,
ну народ же должен знать где можно купить мой учебник, как на бумажном так и на элекрическом носителе, значит карта проезда нужна :haha: |
laimas,
сорри, забыла в 93 посте открыть bb-код и выделить текст после запятой жирным |
Цитата:
А вот "электрический носитель", это то, что может и первой жизни лишить. ;) |
Блондинка, вот ещё вариант подсветки ссылок...
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>transform</title>
</head>
<body>
<style>
body { font: 1em sans-serif; }
.box {
border: thin solid #ccc;
padding: .5em;
margin: .5em;
}
a {
text-decoration: none;
color: #3c3cff;
display: inline-block;
padding: .5em;
}
[href*="css"] { color: #009900; }
[href*="css-"] { color: #11bb11; }
:target {
color: #28cc28;
text-shadow: 0 0 .05em;
pointer-events: none;
text-decoration: underline;
outline: none;
}
</style>
<div class="box">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JS</a>
</div>
<div class="box">
<a href="#css-transforms">CSS Transforms</a>
<div class="box">
<a href="#css-transforms/properties/transform">transform</a>
<a href="#css-transforms/properties/transform-origin">transform-origin</a>
<a href="#css-transforms/properties/transform-box">transform-box</a>
<a href="#css-transforms/properties/transform-style">transform-style</a>
<a href="#css-transforms/properties/perspective">perspective</a>
<a href="#css-transforms/properties/perspective-origin">perspective-origin</a>
<a href="#css-transforms/properties/backface-visibility">backface-visibility</a>
</div>
</div>
<script>
(function() {
for(var index = 0, length = document.links.length, link, parts; index < length; index++) {
link = document.links[index];
parts = link.href.split("#");
link.name = parts[1];
}
})();
</script>
</body>
</html>
UPD Цитата:
Или в чём проблема моего предложения? Вместо того, чтобы свалить всё в мистическую папку ccs3 (никто не знает, что это такое!), я предлагаю разбить свойства по спецификациям, и соответственно хлебные крошки в разных видах приложения будут выглядеть так (и это хорошо!): CSS » Transforms Level 1 » transform-origin CSS » Basic User Interface Level 4 » caret-shape CSS » Media Queries Level 5 » scripting А не так, как предлагает Блондинка (это очень плохо!): CSS » CSS3 » transform-origin CSS » CSS3 » caret-shape CSS » CSS3 » scripting Это вообще ни о чём! Кроме манипуляции вниманием человека это меню ничего и не достигает! Оно совершенно не информативно! |
Цитата:
Оглавление
Оглавление
.....
Том 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" это что нибудь изменит?
я как-бы не вижу связи между подсветкой пунктов меню и учебником, поскольку скрипт подсветки меню можно использовать на сайте абсолютно любой тематики, а не только исключительно на сайте тематики веб |
Цитата:
Вам уже написали про устройство CSS. Цитата:
Вам уже написали, что вам читать/смотреть, если вы хотите продолжить обсуждение! https://javascript.ru/forum/505766-post109.html Вы упорно продолжили демонстрацию своего непонимания и навязчивое повторение вопросов. Цитата:
|
Блондинка, может вам стоит просто добавить хлебные крошки (breadcrumbs)?
|
Malleys,
я пытаюсь объяснить что люди увлекаются не только веб программированием, есть ещё сотни/тысячи хобби, и сайты посвящённые любому хобби имеют право на существование, будь то веб программирование, ботаника, зоология, нумизматика, филателия, либо какое нибудь ещё, и у каждого вида деятельности человека или хобби есть куча более узких направлений, для этого и нужно многоуровневое меню, например чтобы классифицировать собак или кошек по по породам, растения по родам семействам и т.д. основываясь на каких либо общих признаках. |
Nexus,
возможно, но моих знаний явно недостаточно |
Цитата:
<!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 #999; padding: 5px; margin: 5px; }
a:active, a:link { color: #005aff; text-decoration: none; }
a.:visited { color: #5995ff; text-decoration: none; }
a:hover { color: #7a00ff; text-decoration: none; }
.efg { color: #167016; }
.def { color: #127a12; }
.cde { color: #0d850d; }
.bcd { color: #068f06; }
.abc { color: #009900; }
</style>
<script>
var classes = ['abc', 'bcd', 'cde', 'def', 'efg'];
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="/razdel/razdel.html">razdel</a><br>
<a href="/razdel/index.html">razdel_index</a><br>
<a href="/razdel/">razdel/</a><br>
<a href="/razdel/01.html">page-01</a><br>
<a href="/razdel/02.html">page-02</a><br>
<a href="/razdel/03.html">page-03</a>
<div class="menu" id="menu2">
<a href="/razdel/podrazdel/podrazdel.html">podrazdel</a><br>
<a href="/razdel/podrazdel/index.html">podrazdel_index</a><br>
<a href="/razdel/podrazdel/">podrazdel/</a><br>
<a href="/razdel/podrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/03.html">page-03</a>
<div class="menu" id="menu3">
<a href="/razdel/podrazdel/podpodrazdel/podpodrazdel.html">podpodrazdel</a><br>
<a href="/razdel/podrazdel/podpodrazdel/index.html">podpodrazdel_index</a><br>
<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
<div class="menu" id="menu4">
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/podrazdel-a.html">podrazdel-a</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/index.html">podrazdel-a_index</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
</div>
</div>
</div>
</div>
</body>
</html>
ссылка на текущую страницу заменена на спан и подсвечивается, сейчас надо подсветить первые три ссылки в каждом див'е, присвоив им соответствующие классы которые указаны в массиве от большей вложенности к меньшей. |
P. S. на реальном сайте будет только одна из этих ссылок, или индекс или одноименная с папкой страница.
|
Nexus,
мне кажется что надо подправить функцию чтобы подсвечивало и главную страницу папки и одноимённую |
Ясно, тут или некомпентеный народ что маловероятно, или просто я опять не могу ничего объяснить
|
Народ, кто может научить меня правильно задавать вопросы
|
Цитата:
|
| Часовой пояс GMT +3, время: 14:36. |