| 1 |
<html><head> |
|---|
| 2 |
<style> |
|---|
| 3 |
body,p,form {margin:0px;padding:0px;} |
|---|
| 4 |
h1{font-size:14px;margin:5px 0px 5px 5px;padding:0px;} |
|---|
| 5 |
ul {margin:0px 0px 0px 10px;padding:0px;} |
|---|
| 6 |
#tabNav {margin-top:2px;border-bottom:1px solid #aaa;font-size:11px;} |
|---|
| 7 |
#tabNav ul {margin:0px 0px 0px 5px;list-style:none;height:19px;} |
|---|
| 8 |
#tabNav li {height:19px;float:left;cursor:pointer;} |
|---|
| 9 |
#tabNav li .tab{margin:0px 2px;padding:3px 12px;height:12px;background:#ccc;border:1px solid #aaa;font-weight:normal;}' + |
|---|
| 10 |
#tabNav li.active {cursor:default;} |
|---|
| 11 |
#tabNav li.active .tab {height:13px;background:#fff;border-bottom:0px;font-weight:bold;} |
|---|
| 12 |
#tabNav li.blink .tab {height:13px;background:#DAAE81;border-bottom:0px;font-weight:bold;} |
|---|
| 13 |
|
|---|
| 14 |
.tabContainer{display:none;font-size:12px;padding:10px;} |
|---|
| 15 |
#Tab1Container{display:block;} |
|---|
| 16 |
.Tabpane {width:640px;height:480px;} |
|---|
| 17 |
</style> |
|---|
| 18 |
<script> |
|---|
| 19 |
var currentTab = "Tab1"; |
|---|
| 20 |
|
|---|
| 21 |
setTab = function(tab) { |
|---|
| 22 |
if (currentTab != tab) { |
|---|
| 23 |
document.getElementById(currentTab+"Container").style.display = "none"; |
|---|
| 24 |
document.getElementById(currentTab+"Tab").className = ""; |
|---|
| 25 |
document.getElementById(tab+"Container").style.display = "block"; |
|---|
| 26 |
document.getElementById(tab+"Tab").className = "active"; |
|---|
| 27 |
currentTab = tab; |
|---|
| 28 |
} |
|---|
| 29 |
}; |
|---|
| 30 |
|
|---|
| 31 |
paneFunctions = function(tab) { |
|---|
| 32 |
var elem = document.getElementById(tab+'pane'); |
|---|
| 33 |
var changetab = true; |
|---|
| 34 |
try { |
|---|
| 35 |
|
|---|
| 36 |
var location = elem.contentDocument.location; |
|---|
| 37 |
changetab = false; |
|---|
| 38 |
} |
|---|
| 39 |
catch(err) {} |
|---|
| 40 |
if (changetab) setTab(tab); |
|---|
| 41 |
}; |
|---|
| 42 |
|
|---|
| 43 |
</script> |
|---|
| 44 |
</head> |
|---|
| 45 |
<body> |
|---|
| 46 |
<div id="col4"> |
|---|
| 47 |
<div> |
|---|
| 48 |
<a href="http://www.google.com" target="Tab1pane">Load Google in Tab 1</a><br> |
|---|
| 49 |
<a href="http://www.google.com" target="Tab2pane">Load Google in Tab 2</a> |
|---|
| 50 |
</div> |
|---|
| 51 |
<div id="tabNav"> |
|---|
| 52 |
<ul class="clearfix"> |
|---|
| 53 |
<li id="Tab1Tab" class="active" onClick="setTab('Tab1');"><div class="tab">Tab 1</div></li> |
|---|
| 54 |
<li id="Tab2Tab" onClick="setTab('Tab2');"><div class="tab">Tab 2</div></li> |
|---|
| 55 |
</ul> |
|---|
| 56 |
</div> |
|---|
| 57 |
<div id="Tab1Container" class="tabContainer"> |
|---|
| 58 |
<span>Tab 1</span> |
|---|
| 59 |
<div> |
|---|
| 60 |
<iframe class="Tabpane" src="" id="Tab1pane" name="Tab1pane" onload="paneFunctions('Tab1')"></iframe> |
|---|
| 61 |
</div> |
|---|
| 62 |
</div> |
|---|
| 63 |
<div id="Tab2Container" class="tabContainer"> |
|---|
| 64 |
<span>Tab 2</a> |
|---|
| 65 |
<div> |
|---|
| 66 |
<iframe class="Tabpane" src="" id="Tab2pane" name="Tab2pane" onload="paneFunctions('Tab2')"></iframe> |
|---|
| 67 |
</div> |
|---|
| 68 |
</div> |
|---|
| 69 |
</div> |
|---|
| 70 |
<script> |
|---|
| 71 |
</body></html> |
|---|