根據巢狀階層項目自動產生網頁文章的目錄（單階層）
如果你用HTML寫了一個網頁，
裡面有用list寫成的項目，
也就是
<ol>
<li> </li>
<li> </li>
</ol>
下面這個JavaScript的程式碼可以替這些項目自動產生目錄。
<html>
<body>
<h1>Contents</h1>
<p id="contents"></p>
<h1>Context</h1>
<ol>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="first">Chapter</li>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="first">Chapter</li>
</ol>
<script>
//get all the first order title
var f = document.getElementsByClassName("first");
//the total number of first order title
var numberOF = f.length;
//index for the loop
var i, j, k;
//give each title an id such that they can be linked
for(i=0; i<numberOF; i++)
{
f[i].setAttribute("id", "f" + i);
}
//generate the contents
var contents = "";
for(i=0; i<numberOF; i++)
{
contents += "<a href=#f" + i + ">";
contents += (i+1)+". ";
contents += f[i].childNodes[0].nodeValue;
contents += "</a>";
contents += "<br><br>";
}
//show the contents
document.getElementById("contents").innerHTML = contents;
</script>
</body>
</html>
根據巢狀階層項目自動產生網頁文章的目錄（多階層）
如果是多階層的項目，
也就是
<ul>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
則可以用下面的程式碼。
<html>
<head>
<style>
.first{color:red; font-weight: bold;}
.second{color:orange; font-weight: bold;}
.third{color:green; font-weight: bold;}
.forth{color:black; font-weight: normal;}
</style>
</head>
<body>
<h1>An Article with Contents</h1>
<h2>Contents</h2>
<p id="contents"></p>
<h2>Context</h2>
<ol>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="first">Chapter
<ol>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="second">Section
<ol>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="third">Subsection
<p class="forth">bla bla bla bla</p>
</li>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="third">Subsection
<ul>
<li class="forth">item</li>
<li class="forth">item</li>
</ul>
</li>
</ol>
</li>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="second">Section
<ol>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="third">Subsection
</li>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="third">Subsection
</li>
</ol>
</li>
</ol>
</li>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="first">Chapter
<ol>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="second">Section
<ol>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="third">Subsection
</li>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="third">Subsection
</li>
</ol>
</li>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="second">Section
<ol>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="third">Subsection
</li>
<!--%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
<li class="third">Subsection
</li>
</ol>
</li>
</ol>
</li>
</ol>
<script>
//get all the first order title
var f = document.getElementsByClassName("first");
//the total number of first order title
var numberOF = f.length;
//index for the loop
var i, j, k;
//give each title an id such that they can be linked
for(i=0; i<numberOF; i++)
{
f[i].setAttribute("id", "f" + i);
//second order title within current first order title
var s = f[i].getElementsByClassName("second");
var numberOSinF = s.length;
for(j=0; j<numberOSinF; j++)
{
s[j].setAttribute("id", "f" + i + "s" + j);
//third order title within current second order title
var t = s[j].getElementsByClassName("third");
var numberOTinS = t.length;
for(k=0; k<numberOTinS; k++)
{
t[k].setAttribute("id", "f" + i + "s" + j + "t" + k);
}
}
}
//generate the contents
var contents = "";
for(i=0; i<numberOF; i++)
{
contents += "<a href=#f" + i + ">";
contents += f[i].childNodes[0].nodeValue;
contents += "</a>";
contents += "<br>";
var s = f[i].getElementsByClassName("second");
var numberOSinF = s.length;
for(j=0; j<numberOSinF; j++)
{
contents += " ";
contents += "<a href=#f" + i + "s" + j + ">";
contents += s[j].childNodes[0].nodeValue;
contents += "</a>";
contents += "<br>";
var t = s[j].getElementsByClassName("third");
var numberOTinS = t.length;
for(k=0; k<numberOTinS; k++)
{
contents += " ";
contents += "<a href=#f" + i + "s" + j + "t" + k + ">";
contents += t[k].childNodes[0].nodeValue;
contents += "</a>";
contents += "<br>";
}
}
}
//show the contents
document.getElementById("contents").innerHTML = contents;
</script>
</body>
</html>
上面的方法中，也可以不要用class，然後用first=getElementsByTagName("ul")及first.getElementsByTagName("li")。
注意到上面的方法不能用在建立以<h2></h2><h3></h3>為標題的目錄， 這個情形之下， 使用這個方法。
No comments:
Post a Comment