PDA

View Full Version : Changing Tab Menu



JNeal33
04-28-2010, 12:39 AM
Problem: Im trying to get the tabs to change so when the current open page is open the matching tab is opened with it. example: tab "A" is my default opening tab, its z-index is set the highest, but when u click and open tab "B" webpage
I cant get my code to recognize that the current page is page "B" and to set my default tab to "B" instead of "A". Im not sure if this is even possible, i know u can do it by changing the z-index on each page but i was hoping to do this through javascript



function showText() {

document.write("<div id='tab1' class='tab' style='position: absolute; top: 0px; width: 105px; height: 35px; z-index: 3; color: black; text-align: left; border-left: 1px solid grey; border-right: 1px solid grey; background-color: red; left: 10px;'>");
document.write("<a href='home.htm' style='display: block; width: 100px; height: 35px; color: white; text-decoration: none; margin-top: 10px; text-align: center;'>A</a>");
document.write("</div>");
document.write("<div id='tab1List' class='tabList' style='border-left: 1px solid grey; border-right: 1px solid grey; font-size: 12px; height: 30px; position: absolute; top: 35px; left: 10px; width: 945px; z-index: 2; background-color: red'>");
document.write("<ul>");
document.write("<li id='itemList1' class='itemList' style='color: white; text-align: left; margin-left: 10px; padding-top: 9px; padding-bottom: 10px;'>Welcome to RACERmedia.com. Here you can find all the top stories and results in racing!</li>");;
document.write("</ul>");
document.write("</div>");

document.write("<div id='tab2' class='tab' style='position: absolute; top: 0px; width: 105px; height: 35px; z-index: 3; color: black; text-align: left; border-left: 1px solid grey; border-right: 1px solid grey; background-color: grey; left: 115px;'>");
document.write("<a href='formula1Home.htm' style='display: block; width: 100px; height: 35px; color: white; text-decoration: none; margin-top: 10px; text-align: center;'>B</a>");
document.write("</div>");
document.write("<div id='tab2List' class='tabList' style='border-left: 1px solid grey; border-right: 1px solid grey; font-size: 10px; height: 30px; position: absolute; top: 35px; left: 10px; width: 945px; z-index: 1; background-color: red'>");
document.write("<ul>");
document.write("<li id='itemList1' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px;'><a href='#'>Teams</a></li>");
document.write("<li id='itemList2' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>Drivers</a></li>");
document.write("<li id='itemList3' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>Results</a></li>");
document.write("<li id='itemList4' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>Constructors Championship</a></li>");
document.write("<li id='itemList5' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>Driver Standings</a></li>");
document.write("<li id='itemList6' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>Schedule</a></li>");
document.write("</ul>");
document.write("</div>");

document.write("<div id='tab3' class='tab' style='position: absolute; top: 0px; width: 105px; height: 35px; z-index: 3; color: black; text-align: left; border-left: 1px solid grey; border-right: 1px solid grey; background-color: grey; left: 220px;'>");
document.write("<a href='nascarHome.htm' style='display: block; width: 100px; height: 35px; color: white; text-decoration: none; margin-top: 10px; text-align: center;'>C</a>");
document.write("</div>");
document.write("<div id='tab3List' class='tabList' style='border-left: 1px solid grey; border-right: 1px solid grey; font-size: 10px; height: 30px; position: absolute; top: 35px; left: 10px; width: 945px; z-index: 1; background-color: orange'>");
document.write("<ul>");
document.write("<li id='itemList1' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px;'><a href='#'>Teams</a></li>");
document.write("<li id='itemList2' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>Drivers</a></li>");
document.write("<li id='itemList3' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>Results</a></li>");
document.write("<li id='itemList4' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>Manufactors Championship</a></li>");
document.write("<li id='itemList5' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>Driver Standings</a></li>");
document.write("<li id='itemList6' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>Schedule</a></li>");
document.write("</ul>");
document.write("</div>");

document.write("<div id='tab4' class='tab' style='position: absolute; top: 0px; width: 105px; height: 35px; z-index: 3; color: black; text-align: left; border-left: 1px solid grey; border-right: 1px solid grey; background-color: grey; left: 325px;'>");
document.write("<a href='autoRacingHome.htm' style='display: block; width: 100px; height: 35px; color: white; text-decoration: none; margin-top: 10px; text-align: center;'>D</a>");
document.write("</div>");
document.write("<div id='tab4List' class='tabList' style='border-left: 1px solid grey; border-right: 1px solid grey; font-size: 10px; height: 30px; position: absolute; top: 35px; left: 10px; width: 945px; z-index: 1; background-color: blue'>");
document.write("<ul>");
document.write("<li id='itemList1' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px;'><a href='#'>Le-Mans/ALMS</a></li>");
document.write("<li id='itemList2' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>Indy Car</a></li>");
document.write("<li id='itemList3' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>WRC</a></li>");
document.write("<li id='itemList4' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>NHRA</a></li>");
document.write("<li id='itemList5' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>Karting</a></li>");
document.write("</ul>");
document.write("</div>");

document.write("<div id='tab5' class='tab' style='position: absolute; top: 0px; width: 105px; height: 35px; z-index: 3; color: black; text-align: left; border-left: 1px solid grey; border-right: 1px solid grey; background-color: grey; left: 430px;'>");
document.write("<a href='motoRacingHome.htm' style='display: block; width: 100px; height: 35px; color: white; text-decoration: none; margin-top: 10px; text-align: center;'>E</a>");
document.write("</div>");
document.write("<div id='tab5List' class='tabList' style='border-left: 1px solid grey; border-right: 1px solid grey; font-size: 10px; height: 30px; position: absolute; top: 35px; left: 10px; width: 945px; z-index: 1; background-color: green'>");
document.write("<ul>");
document.write("<li id='itemList1' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px;'><a href='#'>MotoGP</a></li>");
document.write("<li id='itemList2' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>AMA SuperBikes</a></li>");
document.write("<li id='itemList3' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>World Superbikes</a></li>");
document.write("<li id='itemList4' class='itemList' style='float: left; width: 16%; text-align: center; padding-top: 9px; padding-bottom: 9px; border-left: 1px solid grey'><a href='#'>AMA Supercross</a></li>");
document.write("</ul>");
document.write("</div>");

function showTabs() {
var maxZ = 5;
var maxZIndex = 4;
var currentTab = null;

var menuTabs = new Array();
var allElems = document.getElementsByTagName("*");

for (var i=0; i < allElems.length; i++) {
if (allElems[i].className == "tab") menuTabs.push(allElems[i]);
}

currentTab = this;
currentTab.style.zIndex = maxZ;

var tabList = this.id + "List";
var activeTab = document.getElementById(tabList);
activeTab.style.zIndex = maxZIndex;
}