30.06.2013, 14:58
|
|
Новичок на форуме
|
|
Регистрация: 30.06.2013
Сообщений: 1
|
|
|
Помогите упростить код спойлера
Помогите, пожалуйста упростить код. Уровень у меня слабый, а хочется сделать красиво. Есть необходимость изменить параметры кода так, чтобы он наследовал все функции (размер шрифта, цвет и пр) у страницы, в которую бы его не вставили. Приведенный список состоит из более 50 позиций, поэтому привел первые несколько. Ну или ткните, где можно посмотреть подобный вариант. Вот оригинал http://chem-center.ru/uslugi1.html
<html><head><font size=4> <style>
#gallery {position:relative; font:18px; Times New Roman:arial, sans-serif; line-height:20px; width:350px; padding:0px 0 0 0px; background:url(pointer.jpg) no-repeat left top; height:500px;}<!-- ===раст между строчками,ширина ссылок=================== -->
#gallery h3 {color:red; font:18px;}<!-- ================================цвет названия заголовка окна с текстом=================== -->
#gallery h3.color {color:#000; margin:12px 25px;}
#gallery .switch {display:block; cursor:pointer; color:#0000ff; font-weight:normal;}<!-- ===цвет ссылки до нажатия=================== -->
#gallery .switch .turn_off {display:none;}
#gallery .off {color:#c00;}<!-- ==========================================================цвет ссылки после нажатия=================== -->
#gallery .off .turn_off {display:inline;}
#gallery .off .turn_on {display:none;}
#gallery .hide {display:none;}
#gallery .show {position:absolute; top:0; left:450px; display:block; width:500px; background:attachment); z-index:300;}<!-- ====цвет фона окна с текстом, раст слева-раст до блока текста, ширина ЗАГОЛОВКА окна с текстом=========== -->
#gallery form {width:300px; height:300px; background:url(form.jpg); padding:50px;}
#gallery form fieldset {background:#fff;}
#gallery .table {background:url(left.gif) no-repeat left bottom; padding:0 25px 25px; width:320px;}
#gallery table, #gallery caption, #gallery table tr, #gallery table tr td {border:1px solid #000; padding:5px; background:#fff;}
#gallery a, #gallery a:visited {color:#00c; line-height:30px;}
#gallery textarea {width:350px; border-color:#0cc; color:#048; padding:10px;}
#gallery dl {width:370px;}
</style>
<script type="text/javascript">
onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTagName ('B') [i++]) {
if (e.className == 'switch') {
e.onclick = function () {
var getEls = document.getElementById('gallery').getElementsByTagName('DIV');
for (var z=0; z<getEls.length; z++) {
if (getEls[z].className == 'hide') {
w=getEls[z].previousSibling;
while (w.nodeType!=1) {
w=w.previousSibling;
}
w.className=w.className.replace('switch over', 'switch');
}
if (getEls[z].className == 'show') {
getEls[z].className=getEls[z].className.replace('show', 'hide');
w=getEls[z].previousSibling;
while (w.nodeType!=1) {
w=w.previousSibling;
}
w.className=w.className.replace('switch off', 'switch over');
}
}
this.className = this.className == 'switch' ? 'switch off' : 'switch';
x=this.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling;
}
x.className = this.className == 'switch off' ? 'show' : 'hide';
}
}
}
}
</script>
</head>
<!-- =================================начало блока=========================================================== -->
I РАЗДЕЛ Продукция подлежащая обязательному<BR>подтверждению соответствия
<!-- ==================название блока 1===================================================== -->
<div id="gallery"><!-- ========================начало окна 1========================================================== -->
<div><b class="switch"><span class="turn_on">+</span><span class="turn_off">-</span>1 Вода питьевая, расфасованная в емкости</b>
<div class="hide">
<h3>определяемый компонент</h3>
Алюминий(Al)<br>
Аммиак и аммоний ион<br>
Барий (Ba)<br>
Бериллий (Be)<br>
Бикарбонат (НСО3)<br>
Бор (В)<br>
Бромидион<br>
Водородный показатель (рН)<br>
Диоксид углерода (CO2) <br>
Железо (Fe, суммарно)<br>
Жесткость<br>
Запах при 20 град. С<br>
Запах при 60 град. С <br>
Йодидион (J)<br>
Йод(J)<br>
Кадмий (Cd, суммарно)<br>
Калий (K)<br>
Кальций (Ca)<br>
Кобальт (Со)<br>
Силикаты (по Si)<br>
Литий (Li)<br>
Магний (Mg)<br>
Марганец (Mn)<br>
Медь (Cu,суммарно)<br>
Молибден (Mo, суммарно)<br>
Мутность<br>
Мышьяк (As)<br>
Натрий (Na)<br>
Нефтепродукты<br>
Никель (Ni,суммарно)<br>
Нитраты (по NO3)<br>
Нитриты (по NO2)<br>
Окисляемость перманганатная<br>
Привкус<br>
Поверхностно активные вещества (ПАВ) анионоактивные<br>
Фосфаты (РО4)<br>
Растворенный кислород<br>
Ртуть (Hg, суммарно)<br>
Свинец (Pb, суммарно)<br>
Селен (Se)<br>
Серебро (Ag)<br>
Сероводород (H2S)<br>
Сурьма (Sb)<br>
Общая минерализация (сухой остаток)<br>
Стронций (Sr (2+))<br>
Сульфаты<br>
Фенолы летучие (суммарно)<br>
Фторидион<br>
Формальдегид<br>
Хлориды<br>
Хлор остаточный связанный<br>
Хлор остаточный cвободный<br>
Хром (Cr (6+))<br>
Цветность<br>
Цианиды (по CN)<br>
Цинк (Zn (2+))<br>
Щелочность<br>
</div>
<!-- ===========================================конец окна==================================================== -->
<div id="gallery"><!-- ==============================начало окна 2=========================================================== -->
<div><b class="switch"><span class="turn_on">+</span><span class="turn_off">-</span>2 Топливо твердое</b>
<div class="hide">
<h3>определяемый компонент</h3>
Зольность<br>
Массовая доля серы общей<br>
Массовая доля хлора<br>
Массовая доля мышьяка
</div>
<!-- ===========================================конец окна================================================================= -->
<div id="gallery"><!-- ==============================начало окна 3=========================================================== -->
<div><b class="switch"><span class="turn_on">+</span><span class="turn_off">-</span>3 Удобрения минеральные</b>
<div class="hide">
<h3>определяемый компонент</h3>
Массовая доля питательных веществ:<br>
общие фосфаты<br>
усвояемые фосфаты<br>
водорастворимые фосфаты<br>
калий в пересчете на K2O<br>
азот общий в аммонийной и амидной формах<br>
азот в нитратной форме<br>
азот общий в аммонийной и нитратной формах<br>
азот в амидной форме<br>
азот в аммонийной форме в солях аммония (кроме фосфорных)<br>
Массоваядоля микроэлементов:<br>
бор общий <br>
марганец водорастворимый<br>
молибден водорастворимый<br>
медь общ.<br>
цинк общ.<br>
кобальт<br>
железо<br>
Массовая доля воды<br>
Гранулометрический состав, для гранулированных и
порошковидных удобрений<br>
Массовая доля примесей токсичных элементов:<br>
мышьяка<br>
свинца<br>
кадмия
</div>
<!-- ===========================================конец окна================================================================= -->
Последний раз редактировалось Exrector, 30.06.2013 в 15:01.
|
|
30.06.2013, 16:52
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
#tab-container *{
padding:0;
margin:0;
border:0 none;
}
#tab-container{
position:relative;
width:700px;
margin:0 auto;
}
#tab-container table.tab {
border-collapse:collapse;
}
#tab-container table.tab tr{
vertical-align:top;
width:100%;
}
#tab-container table.tab td{
width:50%;
border:1px solid #000;
padding:7px 1em;
}
#tab-container div[id^="tab-"] {
display:none;
}
#tab-container #tab-1:target,
#tab-container #tab-2:target,
#tab-container #tab-3:target{
display:block;
}
</style>
</head>
<div id="tab-container">
<h2>I РАЗДЕЛ Продукция подлежащая обязательному<BR>подтверждению соответствия</h2>
<br>
<a href="#tab-1">1 Вода питьевая, расфасованная в емкости</a><br>
<a href="#tab-2">2 Топливо твердое</a><br>
<a href="#tab-3"><span class="turn_on">3 Удобрения минеральные</a><br>
<br>
<br>
<div id="tab-1">
<table class="tab"><tr>
<td colspan=2>
<h3>1 определяемый компонент</h3>
</td></tr>
<tr><td width=50%>
Алюминий(Al)<br>
Аммиак и аммоний ион<br>
Барий (Ba)<br>
Бериллий (Be)<br>
Бикарбонат (НСО3)<br>
Бор (В)<br>
Бромидион<br>
Водородный показатель (рН)<br>
Диоксид углерода (CO2) <br>
Железо (Fe, суммарно)<br>
Жесткость<br>
Запах при 20 град. С<br>
Запах при 60 град. С <br>
Йодидион (J)<br>
Йод(J)<br>
Кадмий (Cd, суммарно)<br>
Калий (K)<br>
Кальций (Ca)<br>
Кобальт (Со)<br>
Силикаты (по Si)<br>
Литий (Li)<br>
Магний (Mg)<br>
Марганец (Mn)<br>
Медь (Cu,суммарно)<br>
Молибден (Mo, суммарно)<br>
Мутность<br>
Мышьяк (As)<br>
Натрий (Na)<br>
Нефтепродукты<br>
</td>
<td width=50%>
Никель (Ni,суммарно)<br>
Нитраты (по NO3)<br>
Нитриты (по NO2)<br>
Окисляемость перманганатная<br>
Привкус<br>
Поверхностно активные вещества (ПАВ) анионоактивные<br>
Фосфаты (РО4)<br>
Растворенный кислород<br>
Ртуть (Hg, суммарно)<br>
Свинец (Pb, суммарно)<br>
Селен (Se)<br>
Серебро (Ag)<br>
Сероводород (H2S)<br>
Сурьма (Sb)<br>
Общая минерализация (сухой остаток)<br>
Стронций (Sr (2+))<br>
Сульфаты<br>
Фенолы летучие (суммарно)<br>
Фторидион<br>
Формальдегид<br>
Хлориды<br>
Хлор остаточный связанный<br>
Хлор остаточный cвободный<br>
Хром (Cr (6+))<br>
Цветность<br>
Цианиды (по CN)<br>
Цинк (Zn (2+))<br>
Щелочность<br>
</td></tr></table></div>
<div id="tab-2">
<table class="tab"><tr>
<td colspan=2 width=100%>
<h3>2 определяемый компонент</h3>
</td></tr>
<tr><td colspan=2>
Массовая доля питательных веществ:<br>
общие фосфаты<br>
усвояемые фосфаты<br>
водорастворимые фосфаты<br>
калий в пересчете на K2O<br>
азот общий в аммонийной и амидной формах<br>
азот в нитратной форме<br>
азот общий в аммонийной и нитратной формах<br>
азот в амидной форме<br>
азот в аммонийной форме в солях аммония (кроме фосфорных)<br>
Массоваядоля микроэлементов:<br>
бор общий <br>
марганец водорастворимый<br>
молибден водорастворимый<br>
медь общ.<br>
цинк общ.<br>
кобальт<br>
железо<br>
Массовая доля воды<br>
Гранулометрический состав, для гранулированных и
порошковидных удобрений<br>
Массовая доля примесей токсичных элементов:<br>
мышьяка<br>
свинца<br>
кадмия
</td></tr></table></div>
<div id="tab-3">
<table class="tab"><tr>
<td colspan=2 width=100%>
<h3>3 определяемый компонент</h3>
</td></tr>
<tr><td colspan=2>
Зольность<br>
Массовая доля серы общей<br>
Массовая доля хлора<br>
Массовая доля мышьяка
</td></tr></table></div>
</div>
</body>
</html>
|
|
30.06.2013, 17:13
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Exrector,
на всякий случай id уникально, если элементов много тогда класс.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#gallery{position:relative;font:18px Times New Roman,arial,sans-serif;line-height:20px;width:350px;padding:0px 0 0 0px;background:url(pointer.jpg) no-repeat left top}
#gallery h3{color:#F00;font:18px}
#gallery h3.color{color:#000;margin:12px 25px}
#gallery .switch{display:block;cursor:pointer;color:#00f;font-weight:normal}
#gallery .switch .turn_off,#gallery .off .turn_on,#gallery .hide{display:none}
#gallery .off{color:#c00}
#gallery .off .turn_off{display:inline}
#gallery .show{position:absolute;top:0;left:450px;display:block;width:500px;background:attachment);z-index:300}
#gallery form{width:300px;height:300px;background:url(form.jpg);padding:50px}
#gallery form fieldset{background:#fff}
#gallery .table{background:url(left.gif) no-repeat left bottom;padding:0 25px 25px;width:320px}
#gallery table,#gallery caption,#gallery table tr,#gallery table tr td{border:1px solid #000;padding:5px;background:#fff}
#gallery a,#gallery a:visited{color:#00c;line-height:30px}
#gallery textarea{width:350px;border:#0cc;color:#048;padding:10px}
#gallery dl{width:370px}
</style>
<script type="text/javascript">
window.onload = function () {
for (var c = document.querySelectorAll(".switch"), a, b = 0; b < c.length; b++)
c[b].onclick = function () {
a && (a.style.color='',a.nextElementSibling.className = "hide", a.children[0].className = "", a.children[1].className = "hide");
this.nextElementSibling.className = a != this?
(a = this,a.style.color='red', a.children[0].className = "hide", a.children[1].className = "", "show"):
(a = null, "hide")
}
};
</script>
</head>
<body>
<!-- =================================начало блока=========================================================== -->
I РАЗДЕЛ Продукция подлежащая обязательному<BR>подтверждению соответствия
<!-- ==================название блока 1===================================================== -->
<div id="gallery"><!-- ========================начало окна 1========================================================== -->
<div><b class="switch"><span class="turn_on">+</span><span class="turn_off">-</span>1 Вода питьевая, расфасованная в емкости</b>
<div class="hide">
<h3>определяемый компонент</h3>
Алюминий(Al)<br>
Аммиак и аммоний ион<br>
Барий (Ba)<br>
Бериллий (Be)<br>
Бикарбонат (НСО3)<br>
Бор (В)<br>
Бромидион<br>
Водородный показатель (рН)<br>
Диоксид углерода (CO2) <br>
Железо (Fe, суммарно)<br>
Жесткость<br>
Запах при 20 град. С<br>
Запах при 60 град. С <br>
Йодидион (J)<br>
Йод(J)<br>
Кадмий (Cd, суммарно)<br>
Калий (K)<br>
Кальций (Ca)<br>
Кобальт (Со)<br>
Силикаты (по Si)<br>
Литий (Li)<br>
Магний (Mg)<br>
Марганец (Mn)<br>
Медь (Cu,суммарно)<br>
Молибден (Mo, суммарно)<br>
Мутность<br>
Мышьяк (As)<br>
Натрий (Na)<br>
Нефтепродукты<br>
Никель (Ni,суммарно)<br>
Нитраты (по NO3)<br>
Нитриты (по NO2)<br>
Окисляемость перманганатная<br>
Привкус<br>
Поверхностно активные вещества (ПАВ) анионоактивные<br>
Фосфаты (РО4)<br>
Растворенный кислород<br>
Ртуть (Hg, суммарно)<br>
Свинец (Pb, суммарно)<br>
Селен (Se)<br>
Серебро (Ag)<br>
Сероводород (H2S)<br>
Сурьма (Sb)<br>
Общая минерализация (сухой остаток)<br>
Стронций (Sr (2+))<br>
Сульфаты<br>
Фенолы летучие (суммарно)<br>
Фторидион<br>
Формальдегид<br>
Хлориды<br>
Хлор остаточный связанный<br>
Хлор остаточный cвободный<br>
Хром (Cr (6+))<br>
Цветность<br>
Цианиды (по CN)<br>
Цинк (Zn (2+))<br>
Щелочность<br>
</div></div></div>
<!-- ===========================================конец окна==================================================== -->
<div id="gallery"><!-- ==============================начало окна 2=========================================================== -->
<div><b class="switch"><span class="turn_on">+</span><span class="turn_off">-</span>2 Топливо твердое</b>
<div class="hide">
<h3>определяемый компонент</h3>
Зольность<br>
Массовая доля серы общей<br>
Массовая доля хлора<br>
Массовая доля мышьяка
</div></div></div>
<!-- ===========================================конец окна================================================================= -->
<div id="gallery"><!-- ==============================начало окна 3=========================================================== -->
<div><b class="switch"><span class="turn_on">+</span><span class="turn_off">-</span>3 Удобрения минеральные</b>
<div class="hide">
<h3>определяемый компонент</h3>
Массовая доля питательных веществ:<br>
общие фосфаты<br>
усвояемые фосфаты<br>
водорастворимые фосфаты<br>
калий в пересчете на K2O<br>
азот общий в аммонийной и амидной формах<br>
азот в нитратной форме<br>
азот общий в аммонийной и нитратной формах<br>
азот в амидной форме<br>
азот в аммонийной форме в солях аммония (кроме фосфорных)<br>
Массоваядоля микроэлементов:<br>
бор общий <br>
марганец водорастворимый<br>
молибден водорастворимый<br>
медь общ.<br>
цинк общ.<br>
кобальт<br>
железо<br>
Массовая доля воды<br>
Гранулометрический состав, для гранулированных и
порошковидных удобрений<br>
Массовая доля примесей токсичных элементов:<br>
мышьяка<br>
свинца<br>
кадмия
</div></div></div>
<!-- ===========================================конец окна================================================================= -->
</body>
</html>
|
|
|
|
