Forum Moderators: open
My 3 basic requirements are;
1) if 'inactive', change to 'active' when clicked.
2) if 'active', change to 'inactive' when another tab is clicked.
3) if 'active', do nothing when clicked.
I am currently using a modified piece of javascript to change the class of a
link, from 'active' to 'inactive', using the onMouseDown behaviour.
I have requirements 1 and 2, but not 3. I suspect I'm not going to be able
to get 3 working without some serious reworking of the current script, but
I'm quite deficient in this area.
My example page here: [cadewhitbourn.com...]
Can anybody help?
The code is all inline in the page, but here it is below as well...
<script language="JavaScript">
function toggle( targetId ){
if (document.getElementById){
target = document.getElementById( targetId );
if (target.className == "inactive"){
target.className = "active";
} else {
target.className = "inactive";
}
}
}
</script>
<ul id="widget-nav">
<li><a href="test1.htm" target="top50-frame" id="a-z" onMouseDown="toggle('a-z');return false;" class="active">A-Z</a></li>
<li><a href="test2.htm" target="top50-frame" id="by-industry" onMouseDown="toggle('by-industry');return false;" class="inactive">By Industry</a></li>
</ul>
Many thanks,
Cade.
---------- toggle.js -------------var currLink = null;
function toggleActive(elm)
{
if(currLink)
currLink.className = currLink.className.replace(/\bactive\b/,'');
currLink = elm;
currLink.className += " active";
}---------- toggle.htm ------------
<html>
<head>
<title>toggle</title>
<script src="toggle.js"></script>
<link rel = "stylesheet" href = "toggle.css" type = "text/css">
</head>
<body>
<div class="ctype1">
<pre>container class: <span>ctype1</span></pre>
<a href="#" onclick="toggleActive(this);return false;">Link1</a><br>
<a href="#" onclick="toggleActive(this);return false;">Link2</a><br>
<a href="#" onclick="toggleActive(this);return false;">Link3</a><br>
</div><div class="ctype2">
<pre>container class: <span>ctype2</span></pre><a href="#" onclick="toggleActive(this);return false;">Link1</a><br>
<a href="#" onclick="toggleActive(this);return false;">Link2</a><br>
<a href="#" onclick="toggleActive(this);return false;">Link3</a><br>
</div></body>
</html>------------- toggle.css -------------
/* all A tags */
A{text-decoration:none;}
/* type1 */
.ctype1 A
{
color: blue;
font-family: arial;
font-size: 12px;
}.ctype1 A:hover{color:#35f8ff;}
.ctype1 A.active,
.ctype1 A.active:hover
{
background-color: #ccc;
color: yellow;
}/* type2 */
.ctype2 A
{
color: green;
font-family: garamond;
}
.ctype2 A:hover{color:#81e287;}.ctype2 A.active,
.ctype2 A.active:hover
{background-color: #ccc;
color: red;
}DIV
{
width: 300px;
padding: 15px;
margin: 30px;
border: solid 2px #cecece;
}PRE
{
font-family: courier, monospace;
}.ctype1 SPAN{color: blue;}
.ctype2 SPAN{color: green;}------------------------------------------------------
If you want to have other groups that toggle independently, it just takes a small tweak.
You need an object to hold all the current selected elements, and some way of 'naming' each group within the object. Below I've used the className of the containing div. Try this script with the HTML/CSS instead:
-------- toggleGroups.js -----------------------------
var currLinks = new Object;
function toggleActive(elm)
{
var group = elm.parentNode.className;
var old = currLinks[group];
if(old)
old.className = old.className.replace(/\bactive\b/,'');
currLinks[group] = elm;
elm.className += " active";
}
