Форум » БЕСЕДКА » HTML и скрипты » Ответить
HTML и скрипты
Василина: Нужно чтобы при нажатии на ссылку на странице под этой ссылкой раскрывался текст. Т.е. НЕ чтобы страница перересовывалась, а именно происходило раскрытие текста и страница расширялась вниз. Спасибо. <html> <head> <title>WOscripts.com - JavaScript - Contractible Headers Script</title> <!-- HEAD START HERE --> <script language="JavaScript1.2"> <!-- /* Contractible Headers Script- © WOscripts.com Visit http://www.woscripts.com */ var ns6=document.getElementById&&!document.all?1:0 var head="display:''" var folder='' function expandit(curobj){ folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style if (folder.display=="none") folder.display="" else folder.display="none" } //--> </script> <!-- HEAD END HERE --> </head> <body bgcolor="#737994" text="#FFFFFF" link="#FFFFFF" topmargin="0" leftmargin="0"> <!-- BODY START HERE --> <h3 style="cursor:hand" onClick="expandit(this)">Нажмите сюда</h3> <span style="display:none" style=&{head};> Тут может быть все, что вы захотите. </span> <h3 style="cursor:hand" onClick="expandit(this)">А теперь сюда</h3> <span style="display:none" style=&{head};> Тут, тоже, может быть все, что угодно :) </span> <!-- BODY END HERE -->
Ответов - 4
Василина: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Раскрывающейся список</title> <script type="text/javascript" src="prototype.lite.js"></script> <script type="text/javascript" src="moo.fx.js"></script> <script type="text/javascript"> // Initialise the effects var containerHeight; window.onload = function() { containerHeight = new fx.Height('container', {height: true, opacity: true, duration: 500}); containerHeight_1 = new fx.Height('container_1', {duration: 400}); // Для закрытого поначалу // containerHeight.hide(); } </script> </head> <body> <table> <tr> <td color="red"> <div id="wrapper"> <p onclick="containerHeight.toggle();">показать / скрыть</p> <div id="container"> <p>Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...</p> <p>Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...</p> <p>Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...Сдесь текст...</p> </div> </div> </td> </tr> </table> </body> </html>
Василина: <style> #text{height:50px; overflow:hidden;} </style> <a href="#" onclick="getElementById('text').style.height='auto'; return false;">раскрыть</a> <div id="text"> тута текст </div>
Василиса: Это посмотри! Это вставь между <html></html> Код <script language="JavaScript" type="text/javascript"> //<!-- function OpenAnsw(ans_id) { var obj_ctrl = getObj(ans_id); if ( obj_ctrl ) { obj_ctrl.style.display = (obj_ctrl.style.display == "none" ? "block" : "none"); } } function getObj(obj_name, doc_obj) { //get DOM node if (!doc_obj) doc_obj = document; if (doc_obj.all) return doc_obj.all[obj_name]; else if (doc_obj.getElementById) return doc_obj.getElementById(obj_name); return null; } //--> </script> Это в body Код <div class="" id="qst_6" onclick="OpenAnsw('ans_6');"> Слово <div align="right"> <div class="" id="ans_6" style="display: none;"> текст который будет появляться и сдвигать ниже идущий текст </div> </div> </div> Внимание!!! обрати внимание на id="" id="qst_ должен свпадать с id="ans_
goutsoullac: вот тебе мой вариант, сам нарыл давно и счастлив <html> <head> <script type="text/javascript"> //обьявление функции которая выполняет переключение между вкладками function showTab(pTabIndex) { var i=0; for (i=0 ; i<tabs.length ; i++) { //делаем нужный контент-вкладку видимой. //стальное - невидимами tabs.style.display = (i == pTabIndex) ? "block" : "none"; //выделяем гиперссылку-корешок, соответствующую видимой вкладке,серым фоном , остальные - белым tabs.style.backgroundColor = (i == pTabIndex) ? "#cccccc" : "#ffffff"; } } </script> <!-- создаём стилевые классы для контейнеров ,содержащего гиперссылки-корешки вкладок , и для контейнера б содержащего сами вкладки --> <style> .tabhost { border: thin solid #cccccc; padding:5px; } .tabhs A { border: thin solid #cccccc; padding: 5px 5px 0px 5px ; } </style> </head> <body> <div class="tabhs"> <A id="tabH1" href="#" ONCLICK="showTab(0);">вкладка 1 </A> <A id="tabH2" href="#" ONCLICK="showTab(1);">вкладка 2 </A> <A id="tabH3" href="#" ONCLICK="showTab(2);">вкладка 3 </A> </div> <div class="tabhost"> <div id="tab1"><p>это содержимое первой вкладкиp</p> </div> <div id="tab2"><p>это содержимое второй вкладкиp</p> </div> <div id="tab3"><p>это содержимое третей вкладки </p> <p>это содержимое </p> <p>это содержимое </p> <p>это содержимое </p> </div> </div> <script TYPE="text/javascript"> var tabs = new Array(); tabs[0] = document.all["tab1"]; tabs[1] = document.all["tab2"]; tabs[2] = document.all["tab3"]; tabs[3] = document.all["tab4"]; tabs[4] = document.all["tab5"]; tabs[5] = document.all["tab6"]; tabs[6] = document.all["tab7"]; tabs[7] = document.all["tab8"]; var tabHs = new Array(); tabHs[0] = document.all["tabH1"]; tabHs[1] = document.all["tabH2"]; tabHs[2] = document.all["tabH3"]; tabHs[3] = document.all["tabH4"]; tabHs[4] = document.all["tabH5"]; tabHs[5] = document.all["tabH6"]; tabHs[6] = document.all["tabH7"]; tabHs[7] = document.all["tabH8"]; //делаем изначально видимую первую вкладку showTab(0); </SCRIPT> </body> </html>
полная версия страницы