12.08.2008, 16:02
|
|
Интересующийся
|
|
Регистрация: 12.08.2008
Сообщений: 10
|
|
|
простой 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
|
|
|
|
Регистрация: 21.02.2008
Сообщений: 1,250
|
|
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>
|
|
12.08.2008, 17:03
|
|
Интересующийся
|
|
Регистрация: 12.08.2008
Сообщений: 10
|
|
Андрей Параничев,
огромное вам человеческое СПАСИБО! все работает отлично! буду разбирать ваш код для дальнейшего обучения!
Удачи!
|
|
12.08.2008, 19:39
|
|
Интересующийся
|
|
Регистрация: 12.08.2008
Сообщений: 10
|
|
|
уважаемый, а как бы еще добавить, чтобы при нажатии на туже ссылку, если ее слой открыт он бы закрывался?
|
|
12.08.2008, 21:54
|
|
|
|
Регистрация: 21.02.2008
Сообщений: 1,250
|
|
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);
}
}
}
Последний раз редактировалось Андрей Параничев, 12.08.2008 в 21:58.
|
|
13.08.2008, 11:38
|
|
Интересующийся
|
|
Регистрация: 12.08.2008
Сообщений: 10
|
|
и еще раз огромное СПАСИБО! |
|
13.08.2008, 14:56
|
|
Новичок на форуме
|
|
Регистрация: 13.08.2008
Сообщений: 4
|
|
|
а подскажите пожалуйста как сделать так, чтобы по нажатию на ссылку (Link[i]) сама ссылка скрывалась, а открывалось содержание соответствующего ей тега div ?
|
|
13.08.2008, 15:20
|
|
|
|
Регистрация: 21.02.2008
Сообщений: 1,250
|
|
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>
|
|
13.08.2008, 15:26
|
|
Новичок на форуме
|
|
Регистрация: 13.08.2008
Сообщений: 4
|
|
|
большое спасибо.
|
|
13.08.2008, 22:26
|
|
Новичок на форуме
|
|
Регистрация: 13.08.2008
Сообщений: 4
|
|
помогите плз сделать код чуть по проще 
<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>
а то как то страшно выглядит
|
|
|
|
