Я немного новичок в JavaScript, но я знаю НЕКОТОРЫЕ основы, поэтому я подумал, что справлюсь с этим.Я пытаюсь показать определенные DIVS при загрузке страницы, но их легко скрыть при нажатии на другой DIV.
Я где-то нашел что-то похожее на этот код и начал с него:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function show( id ) {
document.getElementById(id).style.display = 'block';
}
function hide( id ) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<a href="#" onclick="show('box1'); hide('boxlink1')" class="boxlink" id="boxlink1" style="display:none;">box 1</a></p>
<div id="box1">
<p>Text of box 1</p>
</div>
<a href="#" onclick="show('box2'); hide('boxlink2')" class="boxlink" id="boxlink2">box 2</a></p>
<div id="box2" style="display:none;">
<p>Text of box 2</p>
</div>
<a href="#" onclick="show('box3'); hide('boxlink3')" class="boxlink" id="boxlink3">box 3</a></p>
<div id="box3" style="display:none;">
<p>Text of box 3</p>
</div>
<a href="#" onclick="show('box4'); hide('boxlink4')" class="boxlink" id="boxlink4">box 4</a></p>
<div id="box4" style="display:none;">
<p>Text of box 4 </p>
</div>
</body>
</html>
Отлично.Это уже делает БОЛЬШЕ из того, что я хочу, за исключением того, что я хочу, чтобы он снова отображал скрытые заголовки ящиков, когда вы щелкаете по заголовку нового ящика, и скрывал содержимое любого открытого ящика.
Итак, я попробовал это:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function show( id ) {
document.getElementById(id).style.display = 'block';
}
function hide( id ) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<a href="#" onclick="show(['box1','boxlink2','boxlink3','boxlink4']); hide(['boxlink1','box2','box3','box4'])" class="boxlink" id="boxlink1" style="display:none;">box 1</a></p>
<div id="box1">
<p>Text of box 1</p>
</div>
<a href="#" onclick="show(['box2','boxlink1','boxlink3','boxlink4']); hide(['boxlink2','box1','box3','box4'])" class="boxlink" id="boxlink2">box 2</a></p>
<div id="box2" style="display:none;">
<p>Text of box 2</p>
</div>
<a href="#" onclick="show(['box3','boxlink1','boxlink2','boxlink4']); hide(['boxlink3','box1','box2','box4'])" class="boxlink" id="boxlink3">box 3</a></p>
<div id="box3" style="display:none;">
<p>Text of box 3</p>
</div>
<a href="#" onclick="show(['box4','boxlink1','boxlink2','boxlink3']); hide(['boxlink4','box1','box2','box3'])" class="boxlink" id="boxlink4">box 4</a></p>
<div id="box4" style="display:none;">
<p>Text of box 4 </p>
</div>
</body>
</html>
Что не работает НИЧЕГО.Я предполагаю, что у меня неправильный синтаксис или что-то в этом роде, но я не уверен, что это такое.Я попробовал это несколькими разными способами.Я видел несколько вещей, названных так раньше.
Если кто-то может мне помочь, я думаю, это довольно простое решение.Заранее спасибо.