<style type="text/css">
<!--
#TOC {
margin: 0px;
display: inline;
border-style: none;
}

#TOC a.:link {
color:blue;text-decoration:none
}
#TOC a:visited {
color:orange;text-decoration:none
}
#TOC a:hover {
color:red;text-decoration:underline
}
#TOC a:active {
color:green;text-decoration:underline
}

#TOC li.H1 {
font: normal normal normal 14pt Comic Sans MS,verdana,georgia,arial;
list-style-type: none;
margin-left: 0px;
}
#TOC li.H2 {
font: normal normal normal 12pt Comic Sans MS,verdana,georgia,arial;
list-style-type: none;
line-height:16px;
margin-left: 10px;
}
#TOC li.H3 {
font: normal normal normal 10pt verdana,Comic Sans MS,georgia,arial;
list-style-type: none;
line-height:16px;
margin-left: 20px;
}
#TOC li.H4 {
font: italic normal normal 10pt verdana,Comic Sans MS,georgia,arial;
list-style-type: none;
line-height:16px;
margin-left: 30px;
}
#TOC li.H5 {
font: italic normal normal 10pt verdana,Comic Sans MS,georgia,arial;
list-style-type: none;
line-height:16px;
margin-left: 40px;
}
#TOC li.H6 {
font: italic normal normal 10pt verdana,Comic Sans MS,georgia,arial;
list-style-type: none;
line-height:16px;
margin-left: 50px;
}
-->
</style>

<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Stephen Morley :: http://sbm.customer.netspace.net.au */

var stateTOC = 'ON';

function toggleTOC() {
if (stateTOC == 'ON') {
stateTOC = 'OFF'
document.getElementById('TOC').style.display = "none";
}
else {
stateTOC = 'ON'
document.getElementById('TOC').style.display = "inline";
}
}

function buildTOC() {
/***************************************/
/* Get desired tags and store in array */
/***************************************/
/* Define list of tags to include in toc
Each valid tag must be bounded by spaces to satisfy the test below.
The beginning & end '.'s merely stop leading &
trailing whitespaces being removed.*/
validTagList = '. H1 H2 H3 H4 H5 H6 .';

// Get list of all tags & store in array.
// DOM Level 1 Standard */
if (document.body.childNodes) {
// alert('DOM Standard');
allTags = getObjects();
}
// Microsoft proprietry intermediate DOM
else if (document.all) {
// alert('document.all');
allTags = document.all;
}
// Netscape proprietry intermediate DOM
else if (document.layers) {
// alert('document.layers');
alert('Netscape layers? What to do, what to do ....');
}

var tagDetail = new Array(1);
j = 0;
aNum = 0;
for(i = 0; i < allTags.length; i++) {
if (validTagList.indexOf(' '+allTags[i].tagName+' ') > 0) {
// Add an anchor as a child to the tag so that toc link to it
aNum = aNum + 1;
var aNode = document.createElement("A");
aNode.id = 'Z'+aNum;
allTags[i].appendChild(aNode);

// Keep relevant data fron the tag to use in toc separated by "|".
// ....the name of the tag (eg. H3)
tagDetail[j] = allTags[i].tagName + "|";

// ....the anchor number we have assigned
tagDetail[j] = tagDetail[j]+aNum + "|";

// ....the text of the tag
if (allTags[i].childNodes.length > 0) {
tagDetail[j] = tagDetail[j]+allTags[i].childNodes[0].nodeValue
}
;
j = j + 1;
}
}

/***************************************/
/*Build toc */
/***************************************/
var ulNode = document.createElement("UL");
tocId = document.getElementById('TOC');
tocId.appendChild(ulNode);

for(i = 0; i < tagDetail.length; i++) {
thisDetail = tagDetail[i].split("|");

var liNode = document.createElement("LI");
liNode.className = thisDetail[0];
ulNode.appendChild(liNode);

var aNode = document.createElement("A");
aNode.className = thisDetail[0];
aNode.href = '#Z'+thisDetail[1];
liNode.appendChild(aNode);
aNode.innerHTML = thisDetail[2];

// alert('i='+i + ' tagName='+aNode.tagName + ' href='+aNode.href + ' className='+aNode.className + ' text='+aNode.innerText);

}
}

function getObjects() {
var obj = new Array(1);
j = 0;
obj[j] = document.documentElement;
traverse( document.documentElement );

function traverse(node) {
obj[j] = node;
j = j + 1;
if (node.childNodes != null) {
for (var i=0; i < node.childNodes.length; i++) {
traverse(node.childNodes.item(i));
}
}
}
return obj;
}
//-->
</script>

onLoad="buildTOC()"

<a id=tocPos></a>

<!-- Optional access key (ALT-t) to return to TOC -->
<a href="#tocPos" title="AccessKey: t" accesskey="t"></a>

<!-- Optional button to toggle TOC on/off -->
<input
type = "button"
value = "Table of Contents"
onclick = "toggleTOC()">

<!-- Required div to position TOC -->
<div id=TOC>
</div>

<h1>header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<h2>header 1.1</h2>
<h3>header 1.1.1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<h1>header 2</h1>
<h2>header 2.1</h2>
<h3>header 2.1.1</h3>
<h4>header 2.1.1.1</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<h4>header 2.1.1.2</h4>
<p>paragraph 4</p>

<h3>header 2.1.2</h3>
<h4>header 2.1.2.1</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<h1>header 3</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>

Stephen Morley

Kopieren Sie bitte den Code