Форум

shik · #1 (**permalink**) 20.11.2009, 03:31

Здравствуйте!

Вот есть скрипт, в котором каждая из трех ссылок показывает/скрывает соответствующий текстовый блок:

Код:

   <script type="text/javascript">
      function foo(id) {
      if (document.getElementById(id).style.display == "none")
         {document.getElementById(id).style.display = "block"}
      else
         {document.getElementById(id).style.display = "none"}
      }
   </script>

   <style type="text/css">
      * {
      margin: 0;
      padding: 0;
      }
      body {
      color: #000;
      background: #fff;
      }
      a {
      color: #00f;
      cursor: pointer;
      }
      #controls {
      padding: 20px 50px;
      }
      #block1, #block2, #block3 {
      height: 50px;
      padding: 20px 50px;
      margin: 20px;
      border: 1px solid #ccc;
      }
   </style>
</head>
<body>
   <ul id="controls">
      <li><a onclick="foo('block1')">Скрыть/показать первый блок</a></li>
      <li><a onclick="foo('block2')">Скрыть/показать второй блок</a></li>
      <li><a onclick="foo('block3')">Скрыть/показать третий блок</a></li>
   </ul>

   <p id="block1">
      Первый блок.
   </p>
   <p id="block2">
      Второй блок.
   </p>
   <p id="block3">
      Третий блок.
   </p>

А как должен выглядеть код, чтобы первая ссылка скрывала/показывала, например, первый и третий блоки одновременно?

Gozar · #2 (**permalink**) 20.11.2009, 09:40

<li><a onclick="foo('block1');foo('block3')">Скрыть/показать первый, третий блок</a></li>

shik · #3 (**permalink**) 20.11.2009, 15:58

Получилось, большое спасибо!

shik · #4 (**permalink**) 20.11.2009, 17:27

Кстати, аналогичный вопрос по другому такому же скрипту. Только он скрывает и показывает элементы с эффектом плавного выезжания. Так вот, можно ли в нем сделать, чтобы при нажатии на одну ссылку одновременно выезжали/уезжали несколько блоков, расположенных в разных частях страницы?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="animatedcollapse.js"></script>
</head>

<body>
<p><b>Пример:</b></p>

<a href="javascript:collapse1.slideit()">Показать/Скрыть DIV 1</a>
<div id="cat1" style="width: 300px; background-color: #99E0FB;">
	<div style="padding: 0 5px">
	<h3>Содержимое внутри DIV!</h3>
	<h3>Содержимое внутри DIV!</h3>
	</div>
</div>

<a href="javascript:collapse2.slideit()">Показать/Скрыть DIV 2</a>
<div id="cat2" style="width: 300px; background-color: #99E0FB;">
	<div style="padding: 0 5px">
	<h3>Содержимое внутри DIV!</h3>
	<h3>Содержимое внутри DIV!</h3>
	</div>
</div>

<script type="text/javascript">var collapse1=new animatedcollapse("cat1", 800, true)</script>
<script type="text/javascript">var collapse2=new animatedcollapse("cat2", 800, true)</script>

</body>
</html>

Nik1991 · #5 (**permalink**) 07.12.2010, 18:59

Здравствуйте, подскажите пожалуйста как надо скрывать текст частями, а то я еще зеленый в JavaScript , чтобы при нажатие на кнопку в первый раз скрылась первая часть текста, при втором нажатие вторая часть текста скрылась, а при третьем нажатие он отобразился.
Заранее спасибо )

ksa · #6 (**permalink**) 07.12.2010, 22:30

Сообщение от Nik1991

как надо скрывать текст частями

Как вариант...

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
</style>
<script>
function Go() {
	var o=document.getElementById('txt').getElementsByTagName('span')
	var ok=false
	var i
	for (i=0; i<o.length; i++) {
		if (o[i].style.display!='none') {
			o[i].style.display='none'
			ok=true
			break
		}
	}
	if (ok) {
		return
	}
	for (i=0; i<o.length; i++) {
		o[i].style.display=''
	}
}
</script>
</HEAD>
<BODY>
<p id="txt">
	<span>первая часть</span>
	<span>вторая часть</span>
</p>
<input type='button'value='Go' onclick='Go()' />
</BODY>
</HTML>

Nik1991 · #7 (**permalink**) 08.12.2010, 20:24

Сообщение от ksa

Как вариант...

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
</style>
<script>
function Go() {
	var o=document.getElementById('txt').getElementsByTagName('span')
	var ok=false
	var i
	for (i=0; i<o.length; i++) {
		if (o[i].style.display!='none') {
			o[i].style.display='none'
			ok=true
			break
		}
	}
	if (ok) {
		return
	}
	for (i=0; i<o.length; i++) {
		o[i].style.display=''
	}
}
</script>
</HEAD>
<BODY>
<p id="txt">
	<span>первая часть</span>
	<span>вторая часть</span>
</p>
<input type='button'value='Go' onclick='Go()' />
</BODY>
</HTML>

Большое спасибо !!!) Но в силу моих пока что не очень больших знаниях JS, мне не много не понятен сам скрипт, ты можешь его мне описать для повышения так сказать уровня самообразования???
Заранее спасибо!!!)

x-yuri · #8 (**permalink**) 08.12.2010, 21:38

прочитав эту книжку, ты поймешь, что делает этот скрипт

если же хочешь более адекватный ответ, веди себя адекватнее, задавай вопросы

ksa · #9 (**permalink**) 09.12.2010, 08:57

Сообщение от Nik1991

мне не много не понятен сам скрипт

Что именно в букварском скрипте может быть непонятно?

Форум

Справочник

Discord чат

Курсы javascript