Membuat Tab
Membuat Tab Sederhana
.
Source : http://www.webhostingtalk.com/showthread.php?t=1045871
| <head> | |
| <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> | |
| <title>Untitled 1</title> | |
| <style type="text/css"> | |
| #tabs ul { | |
| padding: 0px; | |
| margin: 0px; | |
| margin-left: 10px; | |
| list-style-type: none; | |
| } | |
| #tabs ul li { | |
| display: inline-block; | |
| clear: none; | |
| float: left; | |
| height: 24px; | |
| } | |
| #tabs ul li a { | |
| position: relative; | |
| margin-top: 16px; | |
| display: block; | |
| margin-left: 6px; | |
| line-height: 24px; | |
| padding-left: 10px; | |
| background: #f6f6f6; | |
| z-index: 9999; | |
| border: 1px solid #ccc; | |
| border-bottom: 0px; | |
| -moz-border-radius-topleft: 4px; | |
| border-top-left-radius: 4px; | |
| -moz-border-radius-topright: 4px; | |
| border-top-right-radius: 4px; | |
| width: 130px; | |
| color: #000000; | |
| text-decoration: none; | |
| font-weight: bold; | |
| } | |
| #tabs ul li a:hover { | |
| text-decoration: underline; | |
| } | |
| #tabs #Content_Area { | |
| padding: 0 15px; | |
| clear:both; | |
| overflow:hidden; | |
| line-height:19px; | |
| position: relative; | |
| top: 20px; | |
| z-index: 5; | |
| height: 150px; | |
| overflow: hidden; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| function tab(tab) { | |
| document.getElementById('tab1').style.display = 'none'; | |
| document.getElementById('tab2').style.display = 'none'; | |
| document.getElementById('li_tab1').setAttribute("class", ""); | |
| document.getElementById('li_tab2').setAttribute("class", ""); | |
| document.getElementById(tab).style.display = 'block'; | |
| document.getElementById('li_'+tab).setAttribute("class", "active"); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="tabs"> | |
| <ul> | |
| <li id="li_tab1" onclick="tab('tab1')"><a>Tab 1</a></li> | |
| <li id="li_tab2" onclick="tab('tab2')"><a>Tab 2</a></li> | |
| </ul> | |
| <div id="Content_Area"> | |
| <div id="tab1"> | |
| <p>This is the text for tab 1</p> | |
| </div> | |
| <div id="tab2" style="display: none;"> | |
| <p>This is the text for tab 2.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Source : http://www.webhostingtalk.com/showthread.php?t=1045871
About Izoels notes
makasih gan buat caranya hehehe
ReplyDeletemakasih banget ya gan caranya ane coba
ReplyDeletethank's sobat .. nice info ..
ReplyDeleteArtikel yang brmanfaat sobat ..
ReplyDeleteoh iya, itu paka jQuery yah gan ?
ReplyDeleteitu JavaScript sama CSS sama HTML doank ... :)
ReplyDelete