Active link busted! [Archive]

far2many

06-30-2011, 09:18 PM

Hello,

I have tried for two hours to work out what I have done wrong here and woudl appreciate other heads at this stage.

I have a css tabbed box with java on click event. The problem is css.

When i select a link, hover etc its all great but once i have selected it and move away it doesnt show. I know its because the active link is set to white but i need it to be white on a blue background and when selected black text on a white background.

Any help would be greatly thanked.

Cheers
Peter

http://www.bushcottages.co.uk/new.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mathematics Learning Zone</title>
<meta name="description" content="Learn Key Stage 4 Mathematics and Achieve a Grade C.">
<meta name="keywords" content="Maths, Mathematics, Key Stage 4, Key Stage 4 Maths, GCSE Maths, Maths Grade C">
<meta name="author" content="Peter Devlin">

<script type="text/javascript" src="java/jquery-1.5.min.js"></script>

<script type="text/javascript" src="http://www.bushcottages.co.uk/java/jquery.newsTicker-1.2.2.js"></script>
<script type="text/javascript">

</script>

<script type="text/javascript">

$(document).ready(function() {

//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});

});
</script>

<style type="text/css">

*
{
border: 0;
margin: 0;
padding-top:0;
}
#topmargin
{
width:900px;
height:5px;
margin:auto;
}

#banner
{
width: 900px;
height: 70px;
background-image: url('banner.png');
margin: auto;
margin-bottom: 5px;
background-color: #000066;
}

#horizontalmenu
{
width: 900px;
height: 25px;
margin: auto;
margin-bottom: 5px;
background-color: #000066;
}

#horizontalmenu ul
{
list-style-type: none;
margin: 0px;
padding: 2px 0px 0px 0px;
}

#horizontalmenu ul li
{
float: left;
display: block;
text-align: center;
width: 300px;
}

#horizontalmenu ul li a
{
text-decoration: none;
font-family: georgia;
font-size: 1em;
color: #fafafa;
}

#horizontalmenu ul li a:hover
{
font-family: georgia;
font-size: 1em;
padding: 5px 40px 5px;
color: #000000;
background-color: #ffffff;
}

#mainpage
{
width: 900px;
margin: auto;
}

#one
{
float: left;
width: 150px;
margin-right: 5px;
}

#two
{
float: left;
width: 590px;
margin-right: 5px;
}

#three
{
float: left;
width: 150px
}

#verticalmenu
{
float: left;
width: 150px;
}

#verticaltopmenu
{
float: left;
width: 150px;
height: 23px;
background-color: #000066;
}

#verticalmainmenu
{
float: left;
width: 146px;
text-decoration: none;
border-style: solid;
border-width: 2px;
border-color: #000066;
padding-top: 2px;
padding-bottom: 2px;
}

#verticalmainmenu ul
{
text-decoration: none;
list-style: none;
padding: 0px;
margin: 0px;
color: black;
}

#verticalmainmenu ul li
{
list-style: none;
text-decoration: none;
display: block;
padding: 0px;
text-align: left;
font-family: georgia;
font-size: .8em;
color: black;
}

#verticalmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}

#verticalmainmenu a:hover
{
background-color: white;
color: #000066;
}

#tickercontainer
{
float: left;
width: 586px;
height: 21px;
margin-bottom: 5px;
border-color: #000066;
border-style: solid;
border-width: 2px;
}

#tickersidetitle
{
float: left;
width: 125px;
height: 21px;
background-color: #000066;
}

#tickercontent
{
float: left;
width: 461px;
height: 21px;
padding: 0px;
}

ul#news
{
margin: 0px;
height: 21px;
padding: 0px 0px 0px 0px;
}

ul#news li
{
list-style: none;
font-family: georgia;
font-size: 14px;
font-weight: bold;
color: #004400;
margin: 0px;
padding: 0px 0px 0px 10px;
}

ul#news li a:link, ul#news li a:hover
{
color: #004400;
text-decoration: none;
}

#contentwindow
{
float: left;
width: 590px;
height: 300px;
}

ul.tabs
{
width: 590px; /*--Set width of container--*/
height: 23px; /*--Set height of tabs--*/
margin: 0px;
padding: 0px;
float: left;
list-style: none;
border-bottom: 2px solid #000066; /*--Set line at bottom of ul--*/
}

ul.tabs li
{
float: left;
margin-right: 1px; /*adjusts gap between tabs*/
height: 23px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 23px; /*--Vertically aligns the text within the tab--*/
margin-bottom: -2px;
background: #000066;
border-color: #000066;
border-style: solid;
border: 2px;
}

ul.tabs li a
{
text-decoration: none;
color: #FFFFFF;
font-family: georgia;
font-size: 14px;
display: block;
padding: 0 20px;
}

ul.tabs li a:hover
{
background-color: #330099;
}

ul.tabs li.active, ul.tabs li.active a:hover /*--Makes sure that the active tab does not listen to the hover properties--*/
{
color: #000000;
background: #FFFFFF;
border-color: #000066;
border-style: solid;
border: 2px 2px 2px 0px;
border-bottom: 2px solid #FFFFFF; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
border: 2px solid #000066;
border-top: none;
overflow: hidden;
clear: both;
float: left;
width: 586px;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}

#testsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}

#teststopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}

#testsmainmenu
{
float: left;
width: 146px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#testsmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}

#testsmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('test.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}

#testsmainmenu ul li a
{
padding: 0px;
text-decoration: none;
text-align: left;
color: black;
}

#testsmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
#downloadsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}

#downloadstopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}

#downloadsmainmenu
{
float: left;
width: 146px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}

#downloadsmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}

#downloadsmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('download.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}

#downloadsmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}

#downloadsmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
#worksheetsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}

#worksheetstopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}

#worksheetsmainmenu
{
float: left;
width: 146px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}

#worksheetsmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}

#worksheetsmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('worksheet.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}

#worksheetsmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}

#worksheetsmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}

#weblinksmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}

#weblinkstopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}

#weblinksmainmenu
{
float: left;
width: 146px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}

#weblinksmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}

#weblinksmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('links.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}

#weblinksmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}

#weblinksmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}

p
{
text-align: center;
font-family: georgia;
font-size: 1em;
color: #FFFFFF;
padding-top: 2px;
}

p.a
{
text-align: center;
font-family: georgia;
font-size: 1em;
color: #FFFFFF;
padding-top: 0px;
}

p.b
{
text-align: center;
font-family: georgia;
font-size: 1em;
color: #000000;
padding-top: 0px;
}

</style>

</head>

<body>

<div id="topmargin"></div>
<div id="banner"></div>

<div id="horizontalmenu">
<ul>
<li><a href="url">Number & Algebra</a></li>
<li><a href="url">Geometry and Measures</a></li>
<li><a href="url">Statistics - Data Handling</a></li>
</ul>
</div>

<div id="mainpage">

<div id="one">
<div id="verticalmenu">
<div id="verticaltopmenu"><p>Main Menu</p></div>
<div id="verticalmainmenu">
<ul>
<li><a href="url">Number</a></li>
<li><a href="url">Geometry</a></li>
<li><a href="url">Statistics</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Measures</a></li>
<li><a href="url">Data Handling</a></li>
<li><a href="url">Number</a></li>
<li><a href="url">Geometry</a></li>
<li><a href="url">Statistics</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Measures</a></li>
<li><a href="url">Data Handling</a></li>
<li><a href="url">Number</a></li>
<li><a href="url">Geometry</a></li>
<li><a href="url">Statistics</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Measures</a></li>
<li><a href="url">Data Handling</a></li>
</ul>
</div>
</div>
</div>

<div id="two">
<div id="tickercontainer">
<div id="tickersidetitle"><p class="a">Brainteasers</p></div>
<div id="tickercontent">
<ul id="news">
<li>Algebra - What is 4x = 20 - X? Click for answer</li>
<li><a href="http://www.bushcottages.co.uk/1.htm">How many "Vertices" does a cube have?</a></li>
<li><a href="http://www.bushcottages.co.uk/1.htm">What is the most common class Called?</a></li>
</ul>
</div>
</div>
<div id="contentwindow">
<ul class="tabs">
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
<p class="b">hello</p>
</div>
<div id="tab2" class="tab_content">
<p class="b">well done</p>
</div>
</div></div>
</div>

<div id="three">
<div id="testsmenu">
<div id="teststopmenu"><p>Online Tests</p></div>
<div id="testsmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Averages</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>

<div id="downloadsmenu">
<div id="downloadstopmenu"><p>Downloads</p></div>
<div id="downloadsmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>

<div id="worksheetsmenu">
<div id="worksheetstopmenu"><p>Worksheets</p></div>
<div id="worksheetsmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>

<div id="weblinksmenu">
<div id="weblinkstopmenu"><p>Web Links</p></div>
<div id="weblinksmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>
</div>

</div>
</body>

</html>