| |
|
|
| | Привет всем!
Задача: мне нужно сделать сдвиг слоев, т.е. пользователю задается вопрос, и предлагаются варианты ответов. При выборе ответа, появляется следующий вопрос с вариантами ответа. Все вопросы находятся в div-ах, и естественно не видны пока пользователь не выберет ответ. Также они сдвинуты в виде лестницы, т.е. следующий появляется правее предыдущего. Организовал это так <div id="div1" style="display: none;position:relative;left:5%;z-index:1">.
Проблема: при попытке раскрыть все ответы, некоторые из предыдущих пропадают (становяться не видны).
Подскажите, пожалуйста, решение проблемы или другой способ решения задачи. | |
| |
|
|
| |
|
|
| |
для: MiXOH
(19.09.2007 в 18:55)
| | | position:relative;z-index:1- лишнее
>при попытке раскрыть все ответы
думаю ваша проблема именно в этой части )) | |
| |
|
|
| |
|
|
| |
для: AlexSol
(19.09.2007 в 20:13)
| | | Я не совсем понял, что лишнее, position:relative или z-index:1.
Поэтому объясню необходимость каждого.
position:relative - необходимо для того чтобы свойство left:5% смещала следующий слой вправо относительно начала предыдущего, остальные значения position не дают такого эффекта. Поэтому это не лишнее, без него не будет должного эффекта сдвига.
z-index:1 - раньше этого не было, и проблема была таже, так что даже если убрать ничего не исмениться. | |
| |
|
|
| |
|
|
| |
для: MiXOH
(20.09.2007 в 12:34)
| | | Сдвигать еще по top, может быть. А вообще, вы предложили погадать на картах, не показав свой код. | |
| |
|
|
| |
|
|
| |
для: sim5
(20.09.2007 в 12:39)
| | | После танцев с бубном, была найдена суть ошибки.
Оказывается со слоями все нормально, проблема с таблицами.
При раскрытии пропадают не слои а таблицы с данными. Таблицы нужны для того, чтобы данные оставались на странице, т.к. при сдвиге слоя, часть его выходит за границы страницы и становиться не видна пользователю.
Вот код для примера:
<script>
function show(toShow) {
var t_show = document.getElementById(toShow);
if(t_show.style.display=="none") t_show.style.display = "";
else t_show.style.display="none";
}
</script>
<a href="JavaScript:show('div1')"><b>div1</b></a> <br>
<div id="div1" style="display:none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div1<br>
<a href="JavaScript:show('div2')"><b>div2</b></a> <br>
<div id="div2" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div2<br>
<a href="JavaScript:show('div3')"><b>div3</b></a> <br>
<div id="div3" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div3<br>
</td></tr>
</table>
</div>
<a href="JavaScript:show('div4')"><b>div4</b></a>
<div id="div4" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div4<br>
</td></tr>
</table>
</div>
</td></tr>
</table>
</div>
<a href="JavaScript:show('div5')"><b>div5</b></a>
<div id="div5" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div5<br>
<a href="JavaScript:show('div6')"><b>div6</b></a> <br>
<div id="div6" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div6<br>
</td></tr>
</table>
</div>
<a href="JavaScript:show('div7')"><b>div7</b></a>
<div id="div7" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div7<br>
</td></tr>
</table>
</div>
</td></tr>
</table>
</div>
<br><br>
</td></tr>
</table>
</div>
<a href="JavaScript:show('div8')"><b>div8</b></a> <br>
<div id="div8" style="display:none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
<a href="JavaScript:show('div9')"><b>div9</b></a>
<div id="div9" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div9<br>
<a href="JavaScript:show('div10')"><b>div10</b></a> <br>
<div id="div10" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div10<br>
</td></tr>
</table>
</div>
<a href="JavaScript:show('div11')"><b>div11</b></a>
<div id="div11" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div11<br>
</td></tr>
</table>
</div>
</td></tr>
</table>
</div><br>
<a href="JavaScript:show('div12')"><b>div12</b></a>
<div id="div12" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div12<br>
</td></tr>
</table>
</div>
<br>
</td></tr>
</table>
</div>
<br>
|
| |
| |
|
|
