|
|
(191 intermediate revisions not shown) |
Line 1: |
Line 1: |
| | | |
- | <style>
| |
- | #tabs{
| |
- | margin-left: 4px;
| |
- | padding: 0;
| |
- | background: transparent;
| |
- | voice-family: "\"}\"";
| |
- | voice-family: inherit;
| |
- | padding-left: 5px;
| |
- | }
| |
- | #tabs ul{
| |
- | font: bold 11px Arial, Verdana, sans-serif;
| |
- | margin:0;
| |
- | padding:0;
| |
- | list-style:none;
| |
- | }
| |
- | #tabs li{
| |
- | display:inline;
| |
- | margin:0 2px 0 0;
| |
- | padding:0;
| |
- | text-transform:uppercase;
| |
- | }
| |
- | #tabs a{
| |
- | float:left;
| |
- | background:#A3BBE6 url(images/tabs_left.gif) no-repeat left top;
| |
- | margin:0 2px 0 0;
| |
- | padding:0 0 1px 3px;
| |
- | text-decoration:none;
| |
- | }
| |
- | #tabs a span{
| |
- | float:left;
| |
- | display:block;
| |
- | background: transparent url(images/tabs_right.gif) no-repeat right top;
| |
- | padding:4px 9px 2px 6px;
| |
- | }
| |
- | #tabs a span{float:none;}
| |
- | #tabs a:hover{background-color: #7E94B9;color: white;}
| |
- | #tabs a:hover span{background-color: #7E94B9;}
| |
- | #tabHeaderActive span, #tabHeaderActive a { background-color: #42577B; color:#fff;}
| |
- | .tabContent {
| |
- | clear:both;
| |
- | border:2px solid #42577B;
| |
- | padding-top:2px;
| |
- | background-color:#FFF;
| |
- | }
| |
- | </style>
| |
- |
| |
- | <div id="tabs">
| |
- | <ul>
| |
- | <li style="margin-left: 1px" id="tabHeader1" class="currenttab"><a href="javascript:void(0)" onClick="toggleTab(1,6)"><span>Tab 1</span></a></li>
| |
- | <li id="tabHeader2"><a href="javascript:void(0)" onClick="toggleTab(2,6)" ><span>Tab 2</span></a></li>
| |
- | <li id="tabHeader3"><a href="javascript:void(0)" onclick="toggleTab(3,6)"><span>Tab 3</span></a></li>
| |
- | <li id="tabHeader4"><a href="javascript:void(0)" onClick="toggleTab(4,6)"><span>Tab 4</span></a></li>
| |
- | <li id="tabHeader5"><a href="javascript:void(0)" onclick="toggleTab(5,6);"><span>Tab 5</span></a></li>
| |
- | <li id="tabHeader6"><a href="javascript:void(0)" onclick="toggleTab(6,6);"><span>Tab 6</span></a></li>
| |
- | </ul>
| |
- | </div>
| |
- | <div id="tabscontent">
| |
- | <div id="tabContent1" class="tabContent" style="display:none;">
| |
- | <br /><div>First Tab Content goes here</div>
| |
- | </div>
| |
- |
| |
- | <div id="tabContent2" class="tabContent" style="display:none;">
| |
- | <br /><div>Second Tab Content goes here</div>
| |
- | </div>
| |
- |
| |
- | <div id="tabContent3" class="tabContent" style="display:none;">
| |
- | <br /><div>Third Tab Content goes here</div>
| |
- | </div>
| |
- |
| |
- | <div id="tabContent4" class="tabContent" style="display:none;">
| |
- | <br /><div>Fourth Tab Content goes here</div>
| |
- | </div>
| |
- |
| |
- | <div id="tabContent5" class="tabContent" style="display:none;">
| |
- | <br /><div>Fifth Tab Content goes here</div>
| |
- | </div>
| |
- |
| |
- | <div id="tabContent6" class="tabContent" style="display:none;">
| |
- | <br /><div>Sixth Tab Content goes here</div>
| |
- | </div>
| |
- | </div><!--End of tabscontent-->
| |
- | </div><!--End of tabs-->
| |