个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
29
4
我想知道我需要学习什么才能在 HTML 页面而不是 Microsoft Word 文档中执行此操作。
我使用 Word 创建冗长的文档，并使用标题。 Word 有一个内置的文档结构图，它作为文档左侧的“框架”存在。它读取文档中的任何标题并将它们作为可展开和可折叠的链接放在左 Pane 中。这使用户只需单击左 Pane 中的标题即可轻松浏览长文档。
有谁知道我是否可以用 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
谢谢，编写器
感谢下面的评论。它给了我一个起点。
最佳答案
我一直在寻找同样的东西...所以我写了一些快速代码来做类似的事情:
<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>
关于javascript - HTML - 根据标题展开/折叠？ "document map"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21472443/
29
4
0
我正在尝试计算 iFrame 的高度，但不明白为什么 document.body.offsetHeight + document.body.bottomMargin 不等于 document.docu
我正在使用 Node/Mongoose/MongoDB 并尝试构建一个轮询应用程序。一个关键需求是跟踪单个用户对同一民意调查的响应如何随时间变化(他们一遍又一遍地进行同一民意调查)。 我有一个用户模型
首先，我不是普通的博主，我很困惑。如果我的问题不符合要求，请指导我。我会努力改进的。 我已提交 Microsoft Code Review 的 Microsoft CRM 插件。我是 JavaScri
谁能解释为什么使用类似的东西: gci -force "\\computername\c$\users\username\Documents" -recurse 或者 gci -force "\\co
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, over
这个问题已经有答案了: What is the (function() { } )() construct in JavaScript? (28 个回答) 已关闭 6 年前。 说实话，一开始我以为我可
document.getElementsByTagName("*") 适用于 IE/Firefox/Opera，但不适用于 Chrome 和 Safari。 document.all 适用于 IE/C
这个问题在这里已经有了答案: What is the difference between Document and document in JavaScript? (2 个答案) 关闭 8 年前。
我以某种方式发现将事件监听器添加到文档的行为有点奇怪。虽然向 HTMLElements 添加监听器工作正常，但向文档添加监听器不起作用。但奇怪的是，使用 jQuery 可以让它工作。 那么有人可以解释
谁能告诉我这两个 JavaScript 命令之间的区别？ 这两个跨主要浏览器的兼容性是什么？我知道 documentElement 与大多数浏览器兼容。 谢谢 最佳答案 document.docume
什么时候应该使用 document.all 与 document.getElementById？ 最佳答案 document.all 是 Microsoft 对 W3C 标准的专有扩展。 getEle
当升级到 react-native 0.61.2 时，这个问题出现了。我做到了从手机中删除了 apk 和自动链接使用 react-native link 然后 react-native run-and
当升级到 react-native 0.61.2 时，这个问题出现了。我做到了从手机中删除了 apk 和自动链接使用 react-native link 然后 react-native run-and
我将收到 tungstenite::Message ，它将包含来自客户端的bson文档。我可以将tungstenite::Message转换为Vec，但是如何在服务器端将其转换回 bson::docu
我这里有一个简单的疑问: 文档对象范围位于浏览器选项卡内:我的意思是如果我设置document.tab1 ='tab1' 在一个浏览器选项卡中 它在其他选项卡中不可用。 但是 document.coo
我经常使用并看到推荐的 dom 访问结构，例如这样动态地将内容添加到页面: loader = document.createElement('script'); loader.src = "myurl
我对 JQuery 还很陌生。我正在使用this JQuery 函数在元素上显示工具提示。 我根据我的需要(在这个社区的帮助下)以这种方式编辑了代码: $(document).ready(functi
我想知道哪个是运行js代码的正确方法，该代码根据窗口高度计算垂直菜单的高度并按时设置，不晚不早。 我正在使用 document.ready 但它并没有真正帮助我解决这个问题，它有时没有设置，我必须重新
我正在浏览一个 js 文件并发现这个声明var dataobj=document.all? document.all.id_name : document.getElementById("id_nam
想知道何时使用，这适用于什么浏览器？ if (document.all&&document.getElementById) { // Some code block } 最佳答案 我认为没有任何重要的
我是一名优秀的程序员,十分优秀！