|
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его
подскажите как сделать так чтобы можно была кликнув по ссылке открывалось DIV окно, при клике по тойже ссылке, это окно закрывалось?
да и если возможно так что бы ещё название менялось Открыть/Закрыть, хотя это не обязательно, но если не сложно, было бы не плохо |
Через CSS задайте этому блоку display: none;, а при нажатии на кнопку «Открыть» меняйте это свойство на block. Пробуйте, не получится, выкладывайте код, подскажем, поможем найти ошибку…
|
спасибо что отреагировали на мой вопрос
имеется такой код <script type="text/javascript"> function openbox(id){ display = document.getElementById(id).style.display; if(display=='none'){ document.getElementById(id).style.display='block'; }else{ document.getElementById(id).style.display='none'; } } </script> ссылка для вывода блока при клике <a href="#" onclick="openbox('box'); return false">Открыть</a> отображаемый блок <div id="box" style="display: none;">Отображаемый блок</div> всё работает, но хотелось ещё бы чтобы слово "Открыть" менялось автоматически на слово "Закрыть" после нажатия повторно на ссылку |
window.onload= function() { document.getElementById('toggler').onclick = function() { openbox('box', this); return false; }; }; function openbox(id, toggler) { var div = document.getElementById(id); if(div.style.display == 'block') { div.style.display = 'none'; toggler.innerHTML = 'Открыть'; } else { div.style.display = 'block'; toggler.innerHTML = 'Закрыть'; } } <a id="toggler" href="#">Открыть</a> <div id="box" style="display: none;">Отображаемый блок</div> |
спасибо, работает так как было нужно, но вот одно беспокоит, нельзя бы как то сделать чтобы было всё в одной функции или пусть даже в двух, трёх, главное чтобы часть кода не была открыта, главное чтобы код находился внутри функции. Возможно?
|
Ну если хотите универсальный код, вот, пожалуйста, выглядеть будет примерно так:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Togglers</title> <script type="text/javascript"> // Набор функций var base = { // Поиск элементов по классу findClass: function(str, node) { if(document.getElementsByClassName) return (node || document).getElementsByClassName(str); else { var node = node || document, list = node.getElementsByTagName('*'), length = list.length, Class = str.split(/\s+/), classes = Class.length, array = [], i, j, key; for(i = 0; i < length; i++) { key = true; for(j = 0; j < classes; j++) if(list[i].className.search('\\b' + Class[j] + '\\b') == -1) key = false; if(key) array.push(list[i]); } return array; } }, // Добавление обработчиков событий bind: function(node, type, listener) { if(node.addEventListener) node.addEventListener(type, listener, false); //@cc_on node.attachEvent('on' + type, function() { listener.call(node); }); }, // Реализация DOMContentLoaded init: [], ready: function() { if(!arguments.callee.done) { arguments.callee.done = true; if(this.timer) clearInterval(this.timer); var i, length = this.init.length; for(i = 0; i < length; i++) this.init[i](); this.init = []; } }, check: function() { var _this = this, listener = function() { _this.ready(); }; if(document.addEventListener) document.addEventListener('DOMContentLoaded', listener, false); if(/KHTML|WebKit/i.test(navigator.userAgent)) this.timer = setInterval(function() { if(/loaded|complete/.test(document.readyState)) base.ready(); }, 10); /*@cc_on document.write(unescape('%3CSCRIPT onreadystatechange="if(this.readyState==\'complete\') base.ready()" defer=defer src=\/\/:%3E%3C/SCRIPT%3E')); @*/ this.bind(window, 'load', listener); } }; // Функции для работы с панельками var toggler = { process: function() { var i, list = base.findClass('toggler'), length = list.length; for(i = 0; i < length; i++) base.bind(list[i], 'click', this.toggle); list = base.findClass('content'); length = list.length; for(i = 0; i < length; i++) list[i].style.display = 'none'; }, toggle: function() { var content = base.findClass('content', this.parentNode)[0], e = arguments[0] || window.event; if(content.style.display == 'block') { content.style.display = 'none'; this.innerHTML = 'Показать'; } else { content.style.display = 'block'; this.innerHTML = 'Скрыть'; } e.preventDefault ? e.preventDefault() : e.returnValue = false; } }; // Ищем блоки с классом «toggle» по событию DOMContentLoaded base.init.push(function() { toggler.process(); }); // Запускаем проверку готовности DOM base.check(); </script> <style type="text/css"> .toggle { width: 200px; margin: 0 0 14px; text-align: right; border: 1px solid #ccc; } .toggle .content { text-align: left; border: 1px solid #ccc; background: #eee; } .toggle .toggler { font-size: 11px; } </style> </head> <body> <div class="toggle"> <div class="content">Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст</div> <a class="toggler" href="#">Показать</a> </div> <div class="toggle"> <div class="content">Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст</div> <a class="toggler" href="#">Показать</a> </div> <div class="toggle"> <div class="content">Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст</div> <a class="toggler" href="#">Показать</a> </div> </body> </html> Здесь таких панелек может быть сколько угодно в коде, не используется ниодного идентифкатора, в XHTML-коде нужно только правильно классы расставить. |
да не, вы немного не так поняли, до этого примера был тот самый что мне нужно было, единственное чтобы хотелось, спрятать этот код
window.onload= function() { document.getElementById('toggler').onclick = function() { openbox('box', this); return false; }; }; в функцию, чтобы этот код не был открыто. |
Не совсем понял, что вы хотите. Ну если вынести обработку ссылок в отдельную функцию, то наверное так
function process() { document.getElementById('toggler').onclick = function() { openbox('box', this); return false; }; } if(window.addEventListener) window.addEventListener('load', process, false); //@cc_on window.attachEvent('onload', process); |
мне нужно чтобы всё было в одной функции, вот есть такой код
<style type="text/css"> .closed {display:none;} .opened {display:block;} </style> <script type="text/javascript"> function toggle(imgElem, divId) { if(document.getElementById) { var divElem = document.getElementById(divId); if(divElem.className == "closed") { imgElem.src = "http://www.prompribor.by/img/menu_opened.gif"; divElem.className = "opened"; imgElem.InnerText = 'Открыть'; document.getElementById("linkname").InnerText = 'Открыть'; } else { imgElem.src = "http://www.prompribor.by/img/menu_closed.gif"; divElem.className = "closed"; imgElem.InnerText = 'Закрыть'; document.getElementById("linkname").InnerText = 'Закрыть'; } } } </script> <img src="http://www.prompribor.by/img/menu_closed.gif" onclick="toggle(this,'openbox')"> <a href="#" id="linkname" onclick="toggle(this,'openbox')">Открыть</a> <div id="openbox" class="closed">text</div> при клике по по картинке, она меняется в зависимости от статуса "Открыто/Закрыто", а вот ссылка не работает, а должно так, нажал на ссылку в место "Открыть" появилось "Закрыть", и наоборот. Почемуто с картинкой всё нормально а вот с со ссылкой не получается, помогите пожалуйста |
Не
.InnerText а .innerText и в Mozilla FireFox нет innerText, поэтому надо написать .innerHTML |
Часовой пояс GMT +3, время: 15:46. |
|