Html change on click, change to another html when clicked again [Archive]

ShiWenBin

11-04-2007, 12:30 AM

Not sure if this can be done.. My problem is simliar to this thread.
http://www.dynamicdrive.com/forums/showthread.php?t=22935

But mine's a little different. Take a look at this picture.
http://img140.imageshack.us/my.php?image=screenhunter1fs4.jpg

I click the first underlined word and there's the chinese wording below all the underlined words. How can I do it when I click the second underlined word and the chinese wording below all the underlined words change to the second chinese underlined words? And so on..

Anyone have any idea about it? Hope you get what I'm trying to say.
Thanks alot.

Twey

11-04-2007, 01:11 AM

Hm.
<script type="text/javascript">
var elementLinkGroup = (function() {
var ElementLink = function(args) {
this.id = args.shift();
this.master = args.shift();
this.slaves = args;
};

clickHandler = function(arr) {
var n = arr.length - 1;

return function() {
for(var i = 0; i < arr.length; ++i)
for(var j = 0; j < arr[i].slaves.length; ++j)
arr[i].slaves[j].style.display = (i === n ? "" : "none");
};
};

return function() {
var links = [];

return function() {
var args = Array.prototype.slice.call(arguments),
show = args.pop();

var e = new ElementLink(args);
links.push(e);

e.master.onclick = clickHandler(links);
for(var i = 0; i < e.slaves.length; ++i)
e.slaves[i].style.display = (show ? "" : "none");

return e;
};
}
})();
</script>
</head>
<body>
<div id="title1">Title1</div>
<div id="title2">Title2</div>
<div id="title3">Title3</div>
<div id="zhongwen1">中文一</div>
<div id="zhongwen2">中文二</div>
<div id="zhongwen3">中文三</div>
<script type="text/javascript">
var grp = elementLinkGroup();
grp(document.getElementById("title1"),
document.getElementById("zhongwen1"),
true);
grp(document.getElementById("title2"),
document.getElementById("zhongwen2"),
false);
grp(document.getElementById("title3"),
document.getElementById("zhongwen3"),
false);
</script>Untested.