Skip to content

Instantly share code, notes, and snippets.

@tanjo

tanjo/index.html

Created March 23, 2016 08:15
Show Gist options
  • Save tanjo/1fde237894b3a44b5778 to your computer and use it in GitHub Desktop.
Save tanjo/1fde237894b3a44b5778 to your computer and use it in GitHub Desktop.
Download ZIP
目次自動生成スクリプト
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>mokuji</title>
<link rel="stylesheet" href="styles.css">
</head>
<body onload="createMokuji(2,4)">
<h1>あああ</h1>
<div id="mokuji"></div>
<h2>いいい</h2>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<h2>ううう</h2>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<h3>えええ</h3>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<h4>おおお</h4>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああ</p>
<h5>かかか</h5>
<script src="mokuji.js"></script>
</body>
</html>
Raw
mokuji.js
function createMokuji(first, last) {
var mokuji = document.getElementById('mokuji');
var query = "";
for (var i = first; i <= last; i++) {
if (i == first) {
query += 'h' + i;
} else {
query += ',h' + i;
}
}
var headings = document.querySelectorAll(query);
var div = document.createElement('div');
var ul = document.createElement('ul');
div.appendChild(ul);
for (var j = 0; j < headings.length; j++) {
var heading = headings[j]; {
heading.id = heading.innerHTML;
}
var level = parseInt(heading.tagName.charAt(1));
var line = document.createElement('li');
line.setAttribute('class', 'mokuji' + level);
var a = document.createElement('a');
a.setAttribute('href', '#' + heading.innerHTML);
a.innerHTML = heading.innerHTML;
line.appendChild(a);
ul.appendChild(line);
}
mokuji.appendChild(div);
}
Raw
styles.css
#mokuji a {
color: #6aabcc;
font-size: 14px;
font-weight: bold;
line-height: 22px;
text-decoration: none;
}
#mokuji ul {
list-style:none;
margin: 0;
padding: 0;
}
#mokuji ul li.mokuji2 {
margin-left: 0px;
}
#mokuji ul li.mokuji3 {
margin-left: 10px;
}
#mokuji ul li.mokuji4 {
margin-left: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment