Скрытие элементов на JS
Я написал скрипт
function showKabinetWindow()
{
document.getElementById("kabinet").style.display="block";
var hs=document.getElementById("hide_kabinet");
hs.innerHTML='<img src="minus1.png">';
hs.onclick=hideKabinetWindow;
}
function hideKabinetWindow()
{
document.getElementById("kabinet").style.display="none";
var hs=document.getElementById("hide_kabinet");
hs.innerHTML='<img src="plus.png">';
hs.onclick=showKabinetWindow;
hs.style.display="block";
};
document.getElementById("hide_kabinet").onclick= function() {hideKabinetWindow(); return false};
НТML код
<table>
...........
<tr>
<td class="head_kabinet">Редактировать профиль:</td>
</tr>
<tr>
<td class="head_kabinet2">Редактировать Аватар:
<a style="float:right; margin-top:-12px;" href="#" id="hide_kabinet"><img src="minus.png"> </a></td>
</tr>
<tr id="kabinet" >
<td>
<div class="t_text2"> <!-- СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->
<fieldset class="kabinet_form">
<div>Изменить аватар(не обязательно):</div>
<div><input type="file" size="30" /></div>
</fieldset>
</div>
</td>
</tr>
<tr>
<td class="head_kabinet2">Редактировать ФИО:
<a style="float:right;"href="#" id="hide_kabinet2"> вв</a>
</td>
</tr>
<tr id="kabinet2">
<td>
<div class="t_text2"> <!-- СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->
<fieldset class="kabinet_form">
<div>Изменить ФИО(не обязательно):</div>
<div><input type="text" size="60" /></div>
</fieldset>
</div>
</td>
</tr>
<tr>
<td class="head_kabinet2">Редактировать телефон:</td>
</tr>
<tr>
<td>
<div class="t_text2"> <!-- СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->
<fieldset class="kabinet_form">
<div>Изменить телефон(не обязательно):</div>
<div><input type="text" size="60" /></div>
</fieldset>
</div>
</td>
</tr>
Скрипт необходим для скрытия элементов формы : при щелчке по картинке -исчезает,нажав еще раз она появляется! ПРОБЛЕМА: как сделать чтобы скрипт работал для скрытия не 1 элемента(изменить аватар), а скрывал по своевременному нажатию: элементы (редактировать телефон и фио) |
Цитата:
P.S. Пример лучше делать полный, так его можно даже тут запустить и посмотреть... |
Если сунуть в родительский, то будут скрываться все элементы, а мне нужно чтобы если надо скрыть 1 элемент то 1 клик, если 2 элемент то клик на другой ссылке.И при этом у меня после нажатия на ссылке "показать" меня перекидывает в верх страницы, а форма у меня в центре страницы.
Полный код скрипта и html:
<form>
<table width="480px;" class="t" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody>
<tr>
<td class="head_kabinet">Редактировать профиль:</td>
</tr>
<tr>
<td class="head_kabinet2">Редактировать Аватар:
<a style="float:right; margin-top:-12px;" href="#" id="hide_kabinet">скрыть </a></td>
</tr>
<tr id="kabinet" >
<td>
<div class="t_text2"> <!-- СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->
<fieldset class="kabinet_form">
<div>Изменить аватар(не обязательно):</div>
<div><input type="file" size="30" /></div>
</fieldset>
</div>
</td>
</tr>
<tr>
<td class="head_kabinet2">Редактировать ФИО:
<a style="float:right;"href="#" id="hide_kabinet"> скрыть</a>
</td>
</tr>
<tr id="kabinet">
<td>
<div class="t_text2"> <!-- СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->
<fieldset class="kabinet_form">
<div>Изменить ФИО(не обязательно):</div>
<div><input type="text" size="60" /></div>
</fieldset>
</div>
</td>
</tr>
<tr>
<td class="head_kabinet2">Редактировать телефон:</td>
</tr>
<tr>
<td>
<div class="t_text2"> <!-- СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->
<fieldset class="kabinet_form">
<div>Изменить телефон(не обязательно):</div>
<div><input type="text" size="60" /></div>
</fieldset>
</div>
</td>
</tr>
<tr>
<td>
<div style="margin:5px" align="center">
<input type="submit" class="kabinet_button" value="Сохранить">
<input type="reset" class="kabinet_button2" value="Сброс" >
</div>
</td>
</tr>
</tbody>
</table>
</form>
внизу скрипт после кода вверху
<script text="JavaScript">
function showKabinetWindow()
{
document.getElementById("kabinet").style.display="block";
var hs=document.getElementById("hide_kabinet");
hs.innerHTML='скрыть';
hs.onclick=hideKabinetWindow;
}
function hideKabinetWindow()
{
document.getElementById("kabinet").style.display="none";
var hs=document.getElementById("hide_kabinet");
hs.innerHTML='показать';
hs.onclick=showKabinetWindow;
hs.style.display="block";
};
document.getElementById("hide_kabinet").onclick= function() {hideKabinetWindow(); return false};
</script>
|
alex_89, сделай ты нормальный пример. Чего ты всё кусками какими-то выкладываешь... Да еще с кучей пустых строк.
P.S. В функции можно параметры передавать, если чего... :) |
alex_89,
Мантра для медитации: id не должно повторятся в пределах страницы ...и возможный вариант
<!DOCTYPE html>
<html >
<head>
<title></title>
</head>
<body>
<form>
<table width="480px;" class="t" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody>
<tr>
<td class="head_kabinet">Редактировать профиль:</td>
</tr>
<tr>
<td class="head_kabinet2">Редактировать Аватар: <a style="float:right; margin-top:-12px;"
href="#" id="kabinet" name="kabinet">скрыть</a></td>
</tr>
<tr id="hide_kabinet">
<td>
<div class="t_text2">
<!-- СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->
<fieldset class="kabinet_form">
<div>
Изменить аватар(не обязательно):
</div>
<div>
<input type="file" size="30" />
</div>
</fieldset>
</div>
</td>
</tr>
<tr>
<td class="head_kabinet2">Редактировать ФИО: <a style="float:right;" href="#" id=
"kabinet2" name="kabinet2">скрыть</a></td>
</tr>
<tr id="hide_kabinet2">
<td>
<div class="t_text2">
<!-- СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->
<fieldset class="kabinet_form">
<div>
Изменить ФИО(не обязательно):
</div>
<div>
<input type="text" size="60" />
</div>
</fieldset>
</div>
</td>
</tr>
<tr>
<td class="head_kabinet2">Редактировать телефон:<a style="float:right;" href="#" id=
"kabinet3" name="kabinet2">скрыть</a></td>
</tr>
<tr id="hide_kabinet3">
<td>
<div class="t_text2">
<!-- СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->
<fieldset class="kabinet_form">
<div>
Изменить телефон(не обязательно):
</div>
<div>
<input type="text" size="60" />
</div>
</fieldset>
</div>
</td>
</tr>
<tr>
<td>
<div style="margin:5px" align="center">
<input type="submit" class="kabinet_button" value="Сохранить" /><input type="reset"
class="kabinet_button2" value="Сброс" />
</div>
</td>
</tr>
</tbody>
</table>
</form><script type="text/javascript">
function hideKabinetWindow()
{
var obj = document.getElementById("hide_"+this.id);
var display = obj.style.display;
obj.style.display = (display != "none")?"none":"block";
this.innerHTML = (display != "none")?"показать":"скрыть";
return false
};
document.getElementById("kabinet").onclick= hideKabinetWindow;
document.getElementById("kabinet2").onclick= hideKabinetWindow;
document.getElementById("kabinet3").onclick= hideKabinetWindow;
</script>
</body>
</html>
|
Извините, я еще новичок, не знаю как толком делать полный код- сейчас разобрался, а за пример спасибо большое, попробую в деиствий
|
| Часовой пояс GMT +3, время: 21:48. |