Главная » 2012 Март 16 » JavaScript's: Плавный спойлер на js и jq
18:36 JavaScript's: Плавный спойлер на js и jq | |||||||||||||||
Плавный спойлер на js и jqСоветуем посмотреть: src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> Подходит как для ucoz, так и для других сайтов. Итак, Первым делом подключаем используемую библиотеку jQuery и еще JS код. Между <head> и </head>: Quote <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function(){ $('.splLink').click(function(){ $(this).parent().children('div.splCont').toggle('normal'); return false; }); }); </script> <style type="text/css"> .splCont{display:none; padding:3px 5px;} </style> Если ставите на ucoz, то синее надо убрать! А это туда, где хотите получить спойлер: Code <a href="javscript://" class="splLink"><strong>Спойлер:</strong> пример</a> <div class="splCont"> Это примерный текст! </div> Если хотите несколько спойлеров на странице, то добавьте ещё: Quote <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function(){ $('.splLink2').click(function(){ $(this).parent().children('div.splCont2').toggle('normal'); return false; }); }); </script> <style type="text/css"> .splCont2{display:none; padding:3px 5px;} </style> , а спойлер будет уже: Quote <a href="javscript://" class="splLink2"><strong>Спойлер:</strong> пример</a> <div class="splCont2"> Это примерный текст! </div> И так далее... Материал взят с сайта infoscript.ru
| |||||||||||||||
