Hyperlink Click changes DIV Class?

Forum Moderators: open

Message Too Old, No Replies

Hyperlink Click changes DIV Class?

A multipage appearence from a single file?

JAB Creations

1:48 am on Nov 30, 2004 (gmt 0)

I'm stuck here at school without a challange... so I was thinking with CSS I could make a multipage site using a single file if I used CSS and layers. I figure I'll need a JS to change classes though when a user clicks on a menu as onmouseover and onmouseot won't work when they go to save an image or copy text.

Any suggestions?

Bernard Marx

2:22 pm on Nov 30, 2004 (gmt 0)

If all the content is in specific layers, then it's just a matter of switching the current layer off, then switching the new one on, via ids, or position.

If the content isn't divided into layers, the process can involve searching the document, either once at first, or every time. I thought, seeinmg as you mentioned sitching classNames, whether we could get CSS to do the searching for us.

Here's a demo. It displays content based on the BODY's className.

(*! switch ¦ for unbroken pipe symbol, as usual)


<html> 
<head>
<style>BODY * {display: none; }
.perm {display: block;}
BODY.all * {display: block;}
BODY.group1 .group1 {display: block;}
BODY.group2 .group2 {display: block;}
BODY.group3 .group3 {display: block;}
/*---- Not relevant ----------------------------------*/
DIV{border: solid 1px #aaa; font-family: verdana; width:250px;margin: 15px;}
INPUT{width:150px;}
#buttondiv {position: absolute; left: 500px; top: 50px;width:150px;height:200px; }
#buttondiv *{display:block;}
/*----------------------------------------------------*/
</style> 
<script>
// Used this so as to make
// further extensions easier.
//
Function.prototype.prepareArgs = function(delim){
 var args = this.arguments[0].constructor == Array
   ? this.arguments[0] : this.arguments; 
 var k=0, out=[];
 while(k<args.length) out[out.length]=args[k++];
 return (delimΖdelim=='')? out.join(delim) : out ;
}
function showGroups()
{
document.body.className = showGroups.prepareArgs(' '); 
} </script> 
</head> 
<body class="group1"> 
<div class="group1">Group 1 content.</div>
<div class="group2">Group 2 content.</div>
<div class="group3">Group 3 content.</div> 
<div class="group1">More group 1 content.</div>
<div class="group2">More group 2 content.</div>
<div class="group3">More group 3 content.</div>
<!-- -->
<div id="buttondiv" class="perm">
<input type="button" value="group1" onclick="showGroups('group1')" />
<input type="button" value="group2" onclick="showGroups('group2')" />
<input type="button" value="group3" onclick="showGroups('group3')" />
<!-- 3 options for multiple groups -->
<input type="button" value="groups 1 & 2" onclick="showGroups(['group1','group2'])" />
<input type="button" value="groups 1 & 3" onclick="showGroups('group1','group3')" />
<input type="button" value="groups 2 & 3" onclick="showGroups('group2 group3')" />
<!-- -->
<input type="button" value="none" onclick="showGroups('')" />
<input type="button" value="all" onclick="showGroups('all')" />
</div> 
</body> 
</html>

JAB Creations

6:24 pm on Nov 30, 2004 (gmt 0)

(*! switch � for unbroken pipe symbol, as usual)

I don't do this usually... clearify for me please? :-D

Nevermind I figured it out....

SCHWEET! Thanks! ^.^