我想知道在HTML页面而不是Microsoft Word文档中我需要学习什么。
我使用Word创建冗长的文档，我使用标题。 Word有一个内置的文档映射，它作为文档左侧的“框架”存在。它会读取文档中的任何标题，并将其作为左窗格中的可扩展和可折叠链接。这样，用户只需单击左窗格中的标题即可轻松导航长文档。
是否有人知道我是否可以使用HTML和CSS执行此操作，还是需要学习JavaScript或其他内容。
我想创建一个自动收集标题的框架，并在左框架中创建这些链接，就像在Microsoft Word中一样，但我想在HTML页面中进行。
如果有人知道，你可以指出我需要学习的正确方向，我将不胜感激。
Word的文档地图 http://www.howtogeek.com/76818/learn-how-to-use-the-document-map-in-word-2007/
我希望它看起来像这样但是以某种方式自动生成。 http://www.telerik.com/help/aspnet-ajax/introduction.html
谢谢， mdwriter
感谢下面的评论。它给了我一个开始的地方。
答案 0 :(得分：1)
我一直在寻找相同的东西...所以我写了一些快速的代码来做类似的事情：
<html>
<header>
<style>
pre {
white-space: pre-wrap;
}
#docmap {
background-color: #f0f0f0;
height: 100%;
width: 200px;
position: fixed;
}
#main {
margin-left: 200px;
position: 200px;
padding: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready( readyFn );
function readyFn( $ ) {
var docmap = $("#docmap");
var main = $("#main");
for(i=0; i < 100; i++) {
main.append("<br>");
}
var all = main.find("h1, h2, h3, h4, h5, h6");
docmap.append("<pre>");
iii = 1;
all.each(function(){
nextid = "link_" + iii;
jQuery(this).attr("id", nextid);
var level = this.tagName.slice(1)
var indent = ""
for(i=0; i < level; i++) {
indent += "*";
}
docmap.append("<a href=#" + nextid + ">" + indent +" " + this.innerHTML + "</a><br>");
iii++;
});
docmap.append("</pre>");
}
</script>
</header>
<body>
<div id="docmap"></div>
<div id="main"><pre>
<h1>Jabberwocky 1</h1>
'Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.
'Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!'
<h2>Jabberwocky 2</h2>
He took his vorpal sword in hand:
Long time the manxome foe he sought --
So rested he by the Tumtum tree,
And stood a while in thought.
'Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!'
<h1>Jabberwocky 3</h1>
testing 456
<h2>A Strange Wild Song</h2>
A Strange Wild Song - Poem by Lewis Carroll
Autoplay next video
He thought he saw an Elephant
That practised on a fife:
He looked again, and found it was
A letter from his wife.
'At length I realize,' he said,
'The bitterness of life! '
He thought he saw a Buffalo
Upon the chimney-piece:
He looked again, and found it was
His Sister's Husband's Niece.
'Unless you leave this house,' he said,
'I'll send for the police! '
</pre></div>
</body></html>
答案 1 :(得分：0)
这是一个可以帮助你开始走上正轨的小小问题。
单击列表项查找关联的h1标记，然后抓取h1s sibling p text并将其放入另一个div。
您可以直接使用.sibling（）执行此操作，但我认为这可能更容易理解。
$('h1').each(function(idx,item){
$('ul#list').append(''+item.innerText+'');
});
$('li').on('click',function(){
var selected_class=$(this).attr('class');
$('#selected_content').html($('p.'+selected_class).text());
});
答案 2 :(得分：0)
File：toc.js
function readyFn( $ ) {
var docmap = $("#docmap");
var main = $("#main");
docmap.append("<a href='#main'>[top]</a>");
/* delete leading whitespaces in main pre tag */
var pre = document.querySelector("#main pre");
pre.innerHTML = pre.innerHTML.replace(/^\s+/mg, "");
for(i=0; i < 100; i++) {
main.append("<br>");
}
var all = main.find("h1, h2, h3, h4, h5, h6");
docmap.append("<pre>");
iii = 1;
all.each(function(){
nextid = "link_" + iii;
jQuery(this).attr("id", nextid);
var slevel = this.tagName.slice(1)
var ilevel = parseInt(slevel)
var indent = ""
for(i=0; i < ilevel-1; i++) {
indent += " ";
}
docmap.append(indent + "<a href=#" + nextid + ">" + this.innerHTML + "</a><br>");
iii++;
});
docmap.append("</pre>");
}
$( document ).ready( readyFn );
File：load.js
document.write("<link rel='stylesheet' type='text/css' href='../js/toc.css'>");
document.write("<script src='../js/jquery.min.js'></script>");
document.write("<script src='../js/toc.js'></script>");
文件：example.html
<html>
<head>
<script src="../js/load.js"></script>
</head>
<body>
<div id="docmap"></div>
<!----------------------------------------------->
<!-- do not edit above
<!----------------------------------------------->
<div id="main"><pre>
<h1>Jabberwocky 1</h1>
'Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.
<h2>Jabberwocky 1</h2>
'Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!'
<h3>Jabberwocky 2</h3>
He took his vorpal sword in hand:
Long time the manxome foe he sought --
So rested he by the <a href="google">Tumtum tree</a>,
And stood a while in thought.
'Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!'
<h2>Jabberwocky 3</h2>
testing 456
and plays the same role in discrete-time signal processing that the unit impulse plays in continuous-time signal processing. The unit sample may be used to decompose an arbitrary signal x(n) into a sum of weighted (scaled) and shifted unit samples as follows:
<h2>A Strange Wild Song</h2>
A Strange Wild Song - Poem by Lewis Carroll
Autoplay next video
He thought he saw an Elephant
That practised on a fife:
</pre></div>
<!----------------------------------------------->
<!-- do not edit below
<!----------------------------------------------->
</body></html>
文件：toc.js
pre {
white-space: pre-wrap;
}
body {
background-color: #2E3033
}
a:link, a:visited {
color: #FFFF00;
color: skyblue;
text-decoration: none;
}
a:hover {
background-color: #505050;
text-decoration: none;
}
a:active {
background-color: hotpink;
text-decoration: none;
}
#docmap {
height: 100%;
width: 200px;
padding-top: 10px;
padding-left: 10px;
color: #B8BFC6;
position: fixed;
background-color: #2E3033
}
#main {
position: float;
margin-left: 210px;
position: 210px;
padding-top: 10px;
padding-left: 10px;
background-color: #363B40;
color: #B8BFC6;
}
h1{
border: solid #ccc;
color: #6699FF;
}
h2 {
border-bottom: 1px solid grey;
box-shadow: 0 3px 8px -5px rgba(0,0,0,.5);
#color: #FFCC00;
color: #33FF99
}