Страница 1 из 5 1 23 > Последняя »
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   простой show/hide для контента (https://javascript.ru/forum/dom-window/1550-prostojj-show-hide-dlya-kontenta.html)

M.C. 12.08.2008 16:02
простой show/hide для контента
 
Всем привет! ;)
Вот тут у Гугла сделано так - есть ссылки и есть скрытый конетнт под ними, при нажатии на ссылку этот контент открывается, при нажатии на ссылку ниже верхний скрывается, а нижний открывается и так далее...

Хотелось бы сделать что-то подобное, посмотрел скрипт Гугла - там вроде все просто, но хотелось бы еще проще, так как мне не нужно лишнего.

Вот код гугла

function initTrainingVids() {
  var vidLinks = [];
  var allLinks = document.getElementsByTagName('a');
  
  for(var i = 0, tag; tag = allLinks[i]; i++) {
    if(tag.className == 'vid') {
      vidLinks[vidLinks.length] = tag;
    }
  }

  for(var i = 0, vid; vid = vidLinks[i]; i++) {
    // Get YouTube video ID
    var vidId = vid.href.slice(vid.href.indexOf('=')+1);
    // Find object to add video to
    var vidTarget = vid.parentNode.parentNode.getElementsByTagName('div');
    vidTarget = vidTarget[vidTarget.length - 1];
    /**
    while(vidTarget.nodeName.toLowerCase() != 'div' && vidTarget.className != 'vid') {
      vidTarget = vidTarget.nextSibling;
    }
      **/
    // Attach onclick event
    vid.onclick = function(target, src) {
                    return function() {
                      if(target.style.display != 'block') {
                        var vidTag = '<iframe src="http://www.youtube.com/v/'+src+'"></iframe>';
                        target.innerHTML = vidTag;
                        var allDivs = document.getElementsByTagName('div')
                        for(var i = 0, div; div = allDivs[i]; i++) {
                          if(div.className == 'vid' && div.style.display == 'block') {
                            div.style.display = 'none';
                          }
                        }
                        target.style.display = 'block';
                      } else {
                        target.innerHTML = '';
                        target.style.display = 'none';
                      }
                      return false;
                    };
                  }(vidTarget, vidId);
  }

}


пытался самостоятельно изменить его, но так ничего и не получилось (с програмиированием у меня не очень хорошо) :(

мне нужно просто что-то типа этого:

<a href="#" onclick="show (div1)">LINK1</a>
<div id=div1>
СОДЕРЖАНИЕ1
<div>

<a href="#" onclick="show (div2)">LINK2</a>
<div id=div2>
СОДЕРЖАНИЕ2
<div>

<a href="#" onclick="show (div3)">LINK3</a>
<div id=div3>
СОДЕРЖАНИЕ3
<div>


при этом, когда жму на ЛИНК1 то открывается СОДЕРЖАНИЕ1, когда жму на ЛИНК2 открывается СОДЕРЖАНИЕ2, а СОДЕРЖАНИЕ1 закрывается и т.д.

Нашел также скрипты, которые просто открывают/закрывают свой слой, но чтобы открывали свой, а закрывали чужие - не нашел....

Заранее спасибо!

Андрей Параничев 12.08.2008 16:32
M.C.,
Можете попробовать вот такой вариант. Он может показаться не самым простым, для человека незнакомым с javascript, но я смог быстро придумать только это:
<html>
<head>
	<script>
		// Обворачиваем функцию toggle в локальное замыкание:
		var toggle = function() {
			// Ссылка на текущий открытый div:
			var currentDiv = null;
			
			// Функция для "раскрытия" элемента:
			function open(divElement) {
				// Тут можно добавить эффект "плавного" открытия:
				divElement.style.display = "block";
				currentDiv = divElement;
			}
			
			// Функция для "закрытия" элемента:
			function close(divElement) {
				// Тут можно добавить эффект "плавного" закрытия:
				divElement.style.display = "none";
				currentDiv = null;
			}
			
			// Возвращаем функцию, которая будет вызываться по toggle()
			return function(divID) {
				// Получаем элемент из DOM
				var divElement = document.getElementById(divID);
				// Если такой есть:
				if (divElement) {
					// Если уже открыт какой-то div - закрываем.
					if(currentDiv != null) close(currentDiv);
					// Открываем вызваный.
					open(divElement);
				}
			}
		// Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
		}();
	</script>
	<style>
		.myDiv {
			display: none;
		}
	</style>
</head>
<body>
	<a href="javascript://" onClick="toggle('div1')">Link1</a>
	<div class="myDiv" id="div1">
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
	</div>
	<br />
	
	<a href="javascript://" onClick="toggle('div2')">Link2</a>
	<div class="myDiv" id="div2">
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
	</div>
	<br />
	
	<a href="javascript://" onClick="toggle('div3')">Link3</a>
	<div class="myDiv" id="div3">
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
	</div>
	<br />
</body>
</html>

M.C. 12.08.2008 17:03
Андрей Параничев,
огромное вам человеческое СПАСИБО! все работает отлично! буду разбирать ваш код для дальнейшего обучения! ;)

Удачи!

M.C. 12.08.2008 19:39
уважаемый, а как бы еще добавить, чтобы при нажатии на туже ссылку, если ее слой открыт он бы закрывался?

Андрей Параничев 12.08.2008 21:54
M.C.,
Замените функцию, возвращаемую по return на такую:
// Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт этот div, то просто закрываем.
					if (divElement === currentDiv) {
						close(currentDiv);
					// Если открыт другой div, то закрываем и открываем текущий:
					} else if(currentDiv != null) {
						close(currentDiv);
						open(divElement);
					// Иначе - просто открываем:
					} else {
						open(divElement);
					}
                }
            }

M.C. 13.08.2008 11:38
и еще раз огромное СПАСИБО! ;)

and50 13.08.2008 14:56
а подскажите пожалуйста как сделать так, чтобы по нажатию на ссылку (Link[i]) сама ссылка скрывалась, а открывалось содержание соответствующего ей тега div ?

Андрей Параничев 13.08.2008 15:20
and50,
Запоминать её, точно так же как div, при открытии - скрывать, при закрытии - показывать. Что-то на подобии этого:
<html>
<head>
    <script>
        // Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
			// Текущая ссылка:
			var currentAnchor = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement, linkElement) {
				// Запоминаем и прячем ссылку:
				currentAnchor = linkElement;
				currentAnchor.style.display = "none";
				
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement) {
				// Показываем ссылку и "забываем":
				currentAnchor.style.display = "inline";
				currentAnchor = null;
			
                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID, link) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт какой-то div - закрываем.
                    if(currentDiv != null) close(currentDiv);
                    // Открываем вызваный.
                    open(divElement, link);
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();
    </script>
    <style>
        .myDiv {
            display: none;
        }
    </style>
</head>
<body>
    <a href="javascript://" onClick="toggle('div1', this)">Link1</a>
    <div class="myDiv" id="div1">
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
    </div>
    <br />
 
    <a href="javascript://" onClick="toggle('div2', this)">Link2</a>
    <div class="myDiv" id="div2">
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
    </div>
    <br />
 
    <a href="javascript://" onClick="toggle('div3', this)">Link3</a>
    <div class="myDiv" id="div3">
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
    </div>
    <br />
</body>
</html>

and50 13.08.2008 15:26
большое спасибо.

and50 13.08.2008 22:26
помогите плз сделать код чуть по проще:)
<html>
<head>
    <script>
        // Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function(divID1, divID2, divID3, divID4, divID5, divID6, divID7, divID8, divID9, divID10, divID11, divID12,  divID13, divID14, divID15)
		 {
            // Ссылка на текущий открытый div:
            var currentDiv1 = document.getElementById(divID1);
			var currentDiv2 = document.getElementById(divID2);
			var currentDiv3 = document.getElementById(divID3);
			var currentDiv4 = document.getElementById(divID4);
			var currentDiv5 = document.getElementById(divID5);
			var currentDiv6 = document.getElementById(divID6);
			var currentDiv7 = document.getElementById(divID7);
			var currentDiv8 = document.getElementById(divID8);
			var currentDiv9 = document.getElementById(divID9);
			var currentDiv10 = document.getElementById(divID10);
			var currentDiv11 = document.getElementById(divID11);
			var currentDiv12 = document.getElementById(divID12);
			var currentDiv13 = document.getElementById(divID13);
			var currentDiv14 = document.getElementById(divID14);
			var currentDiv15 = document.getElementById(divID15);
            // Текущая ссылка:
            // Функция для "раскрытия" элемента:
 // Запоминаем и прячем ссылку:
//                currentAnchor = linkElement;
//                if	(currentAnchor.style.display = "none")
//				{currentAnchor.style.display = "block"}
//				else
//				{currentAnchor.style.display = "none"}
// вырубаем все		
			currentDiv1.style.display = "block";
			currentDiv2.style.display = "block";
			currentDiv3.style.display = "block";
			currentDiv4.style.display = "block";
			currentDiv5.style.display = "block";
			currentDiv6.style.display = "none";
			currentDiv7.style.display = "none";
			currentDiv8.style.display = "none";
			currentDiv9.style.display = "none";
			currentDiv10.style.display = "none";
			currentDiv11.style.display = "none";
			currentDiv12.style.display = "none";
			currentDiv12.style.display = "none";
			currentDiv13.style.display = "block";
			currentDiv14.style.display = "block";
			currentDiv15.style.display = "none";
           
        };
    </script>
    <style>
        .myDiv {
            display: none;
        }
    .style1 {color: #CC6666}
    </style>
</head>
<body>

<span class="style1">здесь будет меню</span><br>
<!--выводим блок меню -->
<div id="lMenuUp1"> <strong>Меню1</strong><br> </div>
<div id="lMenuUp2"> <strong>Меню2</strong><br> </div>
<div id="lMenuUp3"> <strong>Меню3</strong><br> </div>

<div class="myDiv" id="submenu1">
        Пункт 11<br>
        Пункт 12<br>
</div>
<div class="myDiv" id="submenu2">
       Пункт 21<br>
       Пункт 22<br>
</div>
<div class="myDiv" id="submenu3">
       Пункт 31<br>
       Пункт 32<br>
</div>

<div class="myDiv" id="lMenuDown1"> <strong>Меню1</strong><br> </div>
<div class="myDiv" id="lMenuDown2"> <strong>Меню2</strong><br> </div>
<div class="myDiv" id="lMenuDown3"> <strong>Меню3</strong><br> </div>



<hr>


<div class="myDiv" id="div1">
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
</div>
<div class="myDiv" id="div2">
        Содержание1<br />
        Содержание1<br />
        Содержание1<br />
        Содержание1<br />
        Содержание1<br />
        Содержание1<br />
        Содержание1<br />
</div>
<div class="myDiv" id="div3">
        Содержание2<br />
        Содержание2<br />
        Содержание2<br />
        Содержание2<br />
        Содержание2<br />
        Содержание2<br />
        Содержание2<br />
</div>
<a href="javascript://" onClick="toggle('lMenuUp1', 'submenu1',  'lMenuDown2', 'lMenuDown3', 'div1', 'lMenuUp2', 'lMenuUp3', 'submenu2', 'submenu3', 'lMenuDown1', 'div2', 'div3', 'link2', 'link3', 'link1')" id='link1'>Link1</a><br>
<a href="javascript://" onClick="toggle('lMenuDown1', 'lMenuUp2', 'lMenuDown3', 'submenu1', 'div2', 'submenu2', 'submenu3', 'lMenuUp1', 'lMenuDown2', 'lMenuUp3', 'div1','div3', 'link1', 'link3', 'link2')" id='link2'>Link2</a><br>
<a href="javascript://" onClick="toggle('lMenuUp3', 'submenu3',  'lMenuDown1', 'lMenuDown2', 'div3', 'lMenuUp1', 'lMenuUp2', 'submenu1', 'submenu2', 'lMenuDown3', 'div1', 'div2', 'link1', 'link3', 'link3')" id='link3'>Link3</a><br>

<hr>




</body>
</html>

а то как то страшно выглядит


Часовой пояс GMT +3, время: 18:11.
Страница 1 из 5 1 23 > Последняя »
Показывать 40 сообщений этой темы на одной странице