Menu
In the following script, the initial display is nearly as I want it, but … ?
1.
When I click on a tab button, I loose the outlines around the buttons.
I’m assuming I’m doing something wrong with the CSS.
Anyone have any idea?
There is a gap between the buttons and the tab content.
Is that because I’m using a table for the button layout?
Is it possible to loose the gap with some combination of margin or padding?
[code]
<html>
<HEAD>
<title>Tab Buttons</title>
<style type=”text/css”>
.tabsPos { position:relative; top:50px; left:150px; }
.tabsBtn { font-size:1.2em; }
.tabsDiv { border:1px solid blue;
height:300px;
width:500px;
margin-top:0px;
padding-top:0px;
color:black;
font-size:1.1em;
overflow:auto;
background-color:orange; }
</style>
<script type=”text/javaScript”>
// Extensively modified from: http://javascript.internet.com/navigation/tab-nav.html
var tabsMenu = [‘News’,’Games’,’Entertainment’];
var tabsContent = new Array();
tabsContent[0] = ‘This is the “News” tab’;
tabsContent[1] = ‘This would be the “Games” tab’;
tabsContent[2] = ‘This is the “Entertainment” tab’;
function drawTabs() {
var str = “<table border=0><tr>”;
for (var x = 0; x < tabsMenu.length; x++) {
str += “<td><input type=’button’ id=’tab”+x+”‘ onclick=’switchTab(“+x+”)'”;
str += ” class=’tabsBtn’ value='”+tabsMenu[x]+”‘></td>”;
}
str += “</tr></table>”;
str += “<div id=’currenttab’ class=’tabsDiv’>”+tabsContent[0]+”</div>”;
document.write(str);
}
function switchTab(tab) {
for (var x = 0; x < tabsMenu.length; x++) {
tabx = ‘tab’+x;
if (x != tab) { document.getElementById(tabx).style.backgroundColor = “#ffffff”; }
}
tabx = ‘tab’+tab;
document.getElementById(tabx).style.backgroundColor = “orange”;
document.getElementById(‘currenttab’).innerHTML = tabsContent[tab];
}
</script>
</HEAD>
<BODY>
<div class=”tabsPos”>
<script>drawTabs();</script>
</div>
</body>
</html>