]]>]]>
<html>
<head>
<style>
.container {
border: 1px solid #000;
width: 300px;
}
.content {
background-color: #ccc;
}
.hide {
display: none;
}
</style>
<script>
function class2regex(name)
{
return new RegExp('(?:^|\\s+)' + name + '(?=\\s+|$)', 'g');
};
function hasClass(object, name)
{
var re = class2regex(name);
return object.className.match(re);
};
function addClass(object, name)
{
if ( hasClass(object, name) ) {
return;
}
object.className = object.className + ' ' + name;
};
function removeClass(object, name)
{
var re = class2regex(name);
object.className = object.className.replace(re, ' ');
};
function toggleClass(object, name)
{
if ( hasClass(object, name) ) {
removeClass(object, name);
} else {
addClass(object, name);
}
};
// http://javascript.ru/unsorted/top-10-functions#8-getelementsbyclass
if ( document.getElementsByClassName ) {
getElementsByClass = function(classList, node) {
return (node || document).getElementsByClassName(classList);
};
} else {
getElementsByClass = function(classList, node) {
var node = node || document,
list = node.getElementsByTagName('*'),
length = list.length,
classArray = classList.split(/\s+/),
classes = classArray.length,
result = [], i,j
for(i = 0; i < length; i++) {
for(j = 0; j < classes; j++) {
if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
result.push(list[i])
break;
}
}
}
return result;
};
}
window.onload = function()
{
var containers = getElementsByClass('container');
for (var i = 0; i < containers.length; i++) {
containers[i].onclick = function()
{
var content = this.getElementsByTagName('div')[1];
toggleClass(content, 'hide');
};
}
};
</script>
</head>
<body>
<div class="container">
<div class="clicker">CLICK ME</div>
<div class="content">Lorem ipsum</div>
</div>
<div class="container">
<div class="clicker">CLICK ME</div>
<div class="content">Lorem ipsum</div>
</div>
</body>
</html>
Обратите внимание, идентификаторы намеренно убрал, одни только классы. Используется функция getElementsByClass для кроссбраузерного получения списка объектов по имени класса.
]]>wisgest, спасибо: сессионные куки, пожалуй, это заманчиво)) Покумекаю.
]]>Для обмена данными между страницами, загружаемыми в одно и то же окно, можно воспользоваться свойством window.name (если что, это строка).
А в CHM это работает?
Легко проверить. Выбраем в меню окна HH.EXE пункт «Перейти по адресу (URL)...» и вводим
javascript:void (window.name="Запомненное значение");переключаем показываемую страницу (переходя по ссылкам или через содержание) и вводим
javascript:alert(window.name);Впрочем, и назначение стиля по ID подошло бы.
Без назначения стиля по ID или изменения правил CSS в любом случае (и с куками) не обойтись. Куки помогут лишь запоминанить какие-то значения, которые всё-равно надо как-то обработать. window.name действует как сессионные куки (т.е. до закрытия окна) и только для одного и того же окна.
]]>Технология предполагает наличие классового стиля .hide (это пример, у вас может быть любой другой). Код добавляет и удаляет данный стиль в заданных элементах.
<html>
<head>
<style>
.container {
border: 1px solid #000;
width: 300px;
}
.content {
background-color: #ccc;
}
.hide {
display: none;
}
</style>
<script>
function class2regex(name)
{
return new RegExp('(?:^|\\s+)' + name + '(?=\\s+|$)', 'g');
};
function hasClass(object, name)
{
var re = class2regex(name);
return object.className.match(re);
};
function addClass(object, name)
{
if ( hasClass(object, name) ) {
return;
}
object.className = object.className + ' ' + name;
};
function removeClass(object, name)
{
var re = class2regex(name);
object.className = object.className.replace(re, ' ')
};
function toggleClass(object, name)
{
if ( hasClass(object, name) ) {
removeClass(object, name);
} else {
addClass(object, name);
}
};
window.onload = function()
{
document.getElementById('container').onclick = function()
{
var content = this.getElementsByTagName('div')[1];
toggleClass(content, 'hide');
};
};
</script>
</head>
<body>
<div id="container" class="container">
<div class="clicker">CLICK ME</div>
<div class="content">Lorem ipsum</div>
</div>
</body>
</html>
1.html
<html>
<body>
<a href="2.html#id1">block 1</a><br />
<a href="2.html#id2">block 2</a><br />
<a href="2.html#id3">block 3</a><br />
</body>
</html>
2.html
<html>
<head>
<style>
.content {
display: none;
}
</style>
<script>
function toggleContent(block)
{
var content = block.getElementsByTagName('div')[0];
if ( ! content.className.match(/\bcontent\b/) ) {
return;
}
if ( content.style.display == 'block' ) {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
};
window.onload = function()
{
var id = window.location.hash;
if ( ! id ) {
return;
}
id = id.replace(/#/, '');
var block = document.getElementById(id);
if ( ! block ) {
return;
}
toggleContent(block);
};
</script>
</head>
<body>
<div id="id1">BLOCK 1
<div class="content">
To be or not to be
</div>
</div>
<div id="id2">BLOCK 2
<div class="content">
Lorem ipsum
</div>
</div>
С куками можно было бы запоминать раскрытые спойлеры из определенных блоков при переходах. Что было бы гибче — потому что, например, при переходе на страницу назад, спойлер из соответствующего блока был бы раскрыт
Для обмена данными между страницами, загружаемыми в одно и то же окно, можно воспользоваться свойством window.name (если что, это строка).
]]>К чему упомянуты куки?
С куками можно было бы запоминать раскрытые спойлеры из определенных блоков при переходах. Что было бы гибче — потому что, например, при переходе на страницу назад, спойлер из соответствующего блока был бы раскрыт. А здесь речь идёт как бы о полу-мере))
Hash знаю, что такое "nash"?
Может опечатка была?
Только я в коде страниц (001.html, 002.html) не нашёл элементов с такими id ("blok_1_1", "blok_1_2"...), к которым мог бы быть применён этот код.
А так? —
<div id="d1">data</div>
<div id="d2">data</div>
<div id="d3">data</div>
Собственно, ID можно любые подставить.
]]>можно ли в CHM-файлах (в которых, как я недавно выяснил, куки не работают)
К чему упомянуты куки?
Подсказывали, что уместно воспользоваться hash, nash
Hash знаю, что такое "nash"?
может и этому есть применение?
Только я в коде страниц (001.html, 002.html) не нашёл элементов с такими id ("blok_1_1", "blok_1_2"...), к которым мог бы быть применён этот код.
]]>