Раздвигающийся текст. Нужна помощь!
Надо чтобы раскрывающийся текст мог раскрываться с нескольких ссылок к примеру из стандартного меню и с обычной ссылки.
Лучше чтобы в меню вызов открытия текста находился в параметре href. + Когда открывается одна форма, вторая сворачивается. Прошу помогите!! Нигде не смог найти такого решения. :cray: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> </head> <body> Меню: <ul> <li><a href="#" class="heading">Button</a></li> <li><a href="#" class="heading1">Button2</a></li> </ul> Текст: <a href="#" class="heading">Button</a> <div class="content">Lorem ipsum dolor sit amet</div> <a href="#" class="heading1">Button2</a> <div class="content1">Lorem ipsum dolor sit amet2</div> <script> $(document).ready(function() { $(".content").hide(); $(".content1").hide(); //toggle the componenet with class msg_body $(".heading").click(function() { $(this).next(".content").slideToggle(500); }); $(".heading1").click(function() { $(this).next(".content1").slideToggle(500); }); });</script> </body> </html> |
|
Спасибо, но немного не то что нужно было.
Ищу решения. Я в этом профан. =( |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script> $(document).ready(function() { $(".content").hide(); $(".content1").hide(); //toggle the componenet with class msg_body $(".heading").click(function(){ var content = $('.content1'); $('.content').slideToggle(500); if(content.css('display')=='block'){ content.slideUp(500); } }); $(".heading1").click(function(){ var content = $('.content'); $('.content1').slideToggle(500); if(content.css('display')=='block'){ content.slideUp(500); } }); }); </script> </head> <body> Меню: <ul> <li><a href="#" class="heading">Button</a></li> <li><a href="#" class="heading1">Button2</a></li> </ul> Текст: <a href="#" class="heading">Button</a> <a href="#" class="heading1">Button2</a> <div class="content">Lorem ipsum dolor sit amet</div> <div class="content1">Lorem ipsum dolor sit amet2</div> </body> </html> |
Круто! Спасибо! ТОлько вот когда подставляю к ссылкам тег <p> он автоматом присваивает стиль display:none;
Еще минус. При нажатии ссылки все время отправляет вверх страницы. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script> $(document).ready(function() { $(".one").hide(); $(".too").hide(); //toggle the componenet with class msg_body $(".textone").click(function(){ var content = $('.too'); $('.one').slideToggle(500); if(content.css('display')=='block'){ content.slideUp(500); } }); $(".texttoo").click(function(){ var content = $('.one'); $('.too').slideToggle(500); if(content.css('display')=='block'){ content.slideUp(500); } }); }); </script> </head> <body> Меню: <ul> <li><a href="#" class="textone">Button</a></li> <li><a href="#" class="texttoo">Button2</a></li> </ul> Текст: <a href="#" class="textone">Button</a> <a href="#" class="texttoo">Button2</a> <div class="one">Lorem ipsum dolor sit amet</div> <div class="too">Lorem ipsum dolor sit amet2</div> </body> </html> |
Вроде норм...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script> $(document).ready(function() { $(".content, .content1").css('display','none'); //toggle the componenet with class msg_body $(".heading").click(function(){ var content = $('.content1'); $('.content').slideToggle(500); if(content.css('display')=='block'){ content.slideUp(500); } return false; }); $(".heading1").click(function(){ var content = $('.content'); $('.content1').slideToggle(500); if(content.css('display')=='block'){ content.slideUp(500); } return false; }); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <p>Меню 1</p> <ul class="menu"> <li><a href="#" class="heading">Button</a></li> <li><a href="#" class="heading1">Button2</a></li> </ul> <p>Меню 2</p> <ul class="menu"> <li><p><a href="#" class="heading">Button</a></p></li> <li><p><a href="#" class="heading1">Button2</a></p></li> </ul> <div class="content">Lorem ipsum dolor sit amet</div> <div class="content1">Lorem ipsum dolor sit amet2</div> </body> </html> |
Спасибо! Все заработало!
Есть просьба последняя. А можно добавить открытому элементу (активированному) id="active" (или что-то на подобии) только чтобы он появлялся не в ссылке меню а в ссылке рядом с текстом. (чтобы я смог на ссылку повесить стили когда активен текст) |
Описуйте проблему сразу и полностью :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script> $(document).ready(function() { $(".content, .content1").css('display','none'); //toggle the componenet with class msg_body $(".heading").click(function(){ var content = $('.content1'); $('.content').slideToggle(500); $('.menu2 li a').removeAttr('id'); $('.menu2 li a.heading').attr('id','active'); if(content.css('display')=='block'){ content.slideUp(500); } return false; }); $(".heading1").click(function(){ var content = $('.content'); $('.content1').slideToggle(500); $('.menu2 li a').removeAttr('id'); $('.menu2 li a.heading1').attr('id','active'); if(content.css('display')=='block'){ content.slideUp(500); } return false; }); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #active{ background:#eee; color:#333; text-decoration:none; border:1px solid #c0c0c0; border-radius:5px; padding:5px 10px 5px 10px; } </style> </head> <body> <p>Меню 1</p> <ul class="menu"> <li><a href="#" class="heading">Button</a></li> <li><a href="#" class="heading1">Button2</a></li> </ul> <p>Меню 2</p> <ul class="menu2"> <li><p><a href="#" class="heading">Button</a></p></li> <li><p><a href="#" class="heading1">Button2</a></p></li> </ul> <div class="content">Lorem ipsum dolor sit amet</div> <div class="content1">Lorem ipsum dolor sit amet2</div> </body> </html> |
=) Супер! Только при закрытии остается активной почему-то.
|
Это сделать нельзя?
|
Часовой пояс GMT +3, время: 19:08. |