![]() |
![]() |
![]() ![]()
Post
#1
|
|
Grupa: Zarejestrowani Postów: 68 Pomógł: 6 Dołączył: 15.06.2009 Skąd: Kraków Ostrzeżenie: (0%) ![]() ![]() |
Witam!
Mam problem ze skryptem JS do zakładek. Mam dwa identyfikatory: #active i #normal. Chcę, aby skrypt zamieniał obiekt z id #active na #normal i zmieniał obiekt podany w funkcji na #active. Zupełnie nie wiem też, jak zrobić wyświetlanie zawartości zakładki w #content. Może obj.innerHTML? Zamiana #active na #normal działa, ale ostatnia linijka kodu nawala: Kod <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>Narzędzia administracyjne</title> <link href="style.css" type="text/css" rel="stylesheet"> <script type="text/javascript"> function display(setContentDiv) { activeDiv = document.getElementById("active"); activeDiv.id = "normal"; setContentDiv.id = "active"; } </script> </head> <body> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td id="padding"> </td> <td><div id="setContent"><p id="active"><a href="javascript:display(this)">Zakładka 1</a></p></div></td> <td id="padding"> </td> <td><div id="setContent"><p id="normal"><a href="javascript:display(this)">Zakładka 2</a></p></div></td> <td id="padding"> </td> <td><div id="setContent"><p id="normal"><a href="javascript:display(this)">Zakładka 3</a></p></div></td> <td id="padding"> </td> <td><div id="setContent"><p id="normal"><a href="javascript:display(this)">Zakładka 4</a></p></div></td> <td id="padding"> </td> <td><div id="setContent"><p id="normal"><a href="javascript:display(this)">Zakładka 5</a></p></div></td> <td id="padding"> </td> </tr> <tr> <td colspan="11"><div id="content">Treść zakładki [font="Courier New"]x[/font]</div></td> </tr> </tbody> </table> </body> </html> Proszę o pomoc! Ten post edytował zavada 9.07.2009, 08:01:26 |
|
|
![]() |
![]()
Post
#2
|
|
Grupa: Zarejestrowani Postów: 450 Pomógł: 84 Dołączył: 27.11.2008 Skąd: Warszawa Ostrzeżenie: (0%) ![]() ![]() |
Zaraz dam Ci przykład jak ja to zrobiłem, bo pisałem 2 dni temu dla siebie.
edit: Jak zawsze skryptu nie dokończyłem (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) CSS'a musiałbyś dostosować do swoich potrzeb, żeby go zmienić na bardziej przypominające zakładki. Skrypt działa w IE 6+, w FF i Operze testowane na najnowszych wersjach. Kod <style> div#tabselect a.activeTab{padding:5px;border:1px solid #798b59;background-color:#e1efca;color:#798b59;text-decoration:none;font-weight:bold;} div#tabselect a.nonactiveTab{padding:5px;border:1px solid gray;background-color:#e5e5e5;color:#848484;text-decoration:none;} div#tabselect a:hover.nonactiveTab{border:1px solid #94a96d;background-color:#eef8de;color:#798b59;} div.nonactive{display:none;} div.active{display:block;} div#selectedTab{display:none;} div#tabselect{margin:15px;} div.tabcontent{margin:5px;padding:15px;} </style> <script> function tabSelect(tabId) { var lastTab = document.getElementById('selectedTab').innerHTML; document.getElementById('tab' + lastTab).className = 'nonactive'; document.getElementById('tab' + tabId).className = 'active'; document.getElementById('link' + lastTab).className = 'nonactiveTab'; document.getElementById('link' + tabId).className = 'activeTab'; document.getElementById('selectedTab').innerHTML = tabId; } </script> Ten post edytował sniffer32 9.07.2009, 08:58:35 |
|
|
![]() ![]() |
![]() |
Aktualny czas: 14.10.2025 - 19:06 |