|
|
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <head>
| |
| - | <style type="text/css">
| |
| - | .shadetabs{
| |
| - | padding: 3px 0;
| |
| - | margin-left: 0;
| |
| - | margin-top: 1px;
| |
| - | margin-bottom: 0;
| |
| - | font: bold 12px Verdana;
| |
| - | list-style-type: none;
| |
| - | text-align: left; /*set to left, center, or right to align the menu as desired*/
| |
| - | }
| |
| | | | |
| - | .shadetabs li{
| |
| - | display: inline;
| |
| - | margin: 0;
| |
| - | }
| |
| - |
| |
| - | .shadetabs li a{
| |
| - | text-decoration: none;
| |
| - | position: relative;
| |
| - | z-index: 1;
| |
| - | padding: 3px 7px;
| |
| - | margin-right: 3px;
| |
| - | border: 1px solid #778;
| |
| - | color: #2d2b2b;
| |
| - | background: -moz-linear-gradient(bottom, #00abeb, #fff);
| |
| - | background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff));
| |
| - | }
| |
| - |
| |
| - | .shadetabs li a:visited{
| |
| - | color: #2d2b2b;
| |
| - | }
| |
| - |
| |
| - | .shadetabs li a:hover{
| |
| - | text-decoration: underline;
| |
| - | color: #2d2b2b;
| |
| - | }
| |
| - |
| |
| - | .shadetabs li a.selected{ /*selected main tab style */
| |
| - | position: relative;
| |
| - | top: 1px;
| |
| - | }
| |
| - |
| |
| - | .shadetabs li a.selected{ /*selected main tab style */
| |
| - | background: -moz-linear-gradient(top, #00abeb, #fff);
| |
| - | background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));
| |
| - | border-bottom-color: white;
| |
| - | }
| |
| - |
| |
| - | .shadetabs li a.selected:hover{ /*selected main tab style */
| |
| - | text-decoration: none;
| |
| - | }
| |
| - |
| |
| - | .tabcontent{
| |
| - | display:none;
| |
| - | }
| |
| - |
| |
| - | @media print {
| |
| - | .tabcontent {
| |
| - | display:block !important;
| |
| - | }
| |
| - | }
| |
| - | </style>
| |
| - |
| |
| - | <script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js"></script>
| |
| - |
| |
| - | </head>
| |
| - | <body>
| |
| - |
| |
| - | <h3>Demo #1- Basic implementation</h3>
| |
| - |
| |
| - | <ul id="countrytabs" class="shadetabs">
| |
| - | <li><a href="#" rel="country1" class="selected">Tab 1</a></li>
| |
| - | <li><a href="#" rel="country2">Tab 2</a></li>
| |
| - | <li><a href="#" rel="country3">Tab 3</a></li>
| |
| - | <li><a href="#" rel="country4">Tab 4</a></li>
| |
| - | <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
| |
| - | </ul>
| |
| - |
| |
| - | <div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
| |
| - |
| |
| - | <div id="country1" class="tabcontent">
| |
| - | Tab content 1 here<br />Tab content 1 here<br />
| |
| - | </div>
| |
| - |
| |
| - | <div id="country2" class="tabcontent">
| |
| - | Tab content 2 here<br />Tab content 2 here<br />
| |
| - | </div>
| |
| - |
| |
| - | <div id="country3" class="tabcontent">
| |
| - | Tab content 3 here<br />Tab content 3 here<br />
| |
| - | </div>
| |
| - |
| |
| - | <div id="country4" class="tabcontent">
| |
| - | Tab content 4 here<br />Tab content 4 here<br />
| |
| - | </div>
| |
| - |
| |
| - | </div>
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - |
| |
| - | var countries=new ddtabcontent("countrytabs")
| |
| - | countries.setpersist(true)
| |
| - | countries.setselectedClassTarget("link") //"link" or "linkparent"
| |
| - | countries.init()
| |
| - |
| |
| - | </script>
| |
| - |
| |
| - | </body>
| |
| - | </html>
| |
"
