<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<title>Solitude</title>
</head>
<body>
<div id="main">
<div id="left-menu" class="expanded initial">
<template id="tmpl-menu-item">
<li class="menu-item><img src="img/menu-empty">アプリケーション</li>
</template>
<ol>
<li id="menu-toggle" class="menu-item"><img src="img/menu-toggle.svg"><span class="expanded">開閉</span></li>
<li class="menu-item"><img src="img/menu-home.svg"><span class="expanded">HOME</span></li>
<li class="menu-item"><img src="img/menu-empty.svg"><span class="expanded">メニューアイテム2</span></li>
<li class="menu-item"><img src="img/menu-empty.svg"><span class="expanded">メニューアイテム3</span></li>
</ol>
</div>
<div id="main-pane">
<ul id="main-tabs">
<li class="tab selected">タブ1</li>
<li class="tab">タブ2</li>
</ul>
<div class="main-article selected">
<h1> Hello Solitude World</h1>
<p>This is first Solitude</p>
</div>
<div class="main-article">
<h1> Hello Solitude World 2</h1>
<p>This is second Solitude</p>
</div>
</div>
</div>
<script type="text/javascript">
main(document);
function main(document) {
query("li.tab").forEach(function(val, index, list) {
val.addEventListener("click", function() {
selectTab(index);
});
})
const leftMenu = query("#left-menu")[0];
const menuToggle = query("#menu-toggle")[0]
menuToggle.addEventListener("click", function() {
leftMenu.classList.remove("initial")
toggleMenuItem(leftMenu);
query("#left-menu li span").forEach(function(val) {
toggleMenuItem(val);
})
})
function toggleMenuItem(element) {
if(element.classList.contains("expanded")) {
element.classList.add("shrinked");
element.classList.remove("expanded");
} else {
element.classList.add("expanded");
element.classList.remove("shrinked");
}
}
function selectTab(index) {
query("li.tab.selected").forEach(function(val) {
val.classList.remove("selected");
});
query("li.tab")[index].classList.add("selected");
console.log(query("li.tab"))
query("div.main-article.selected").forEach(function(val) {
val.classList.remove("selected");
});
query("div.main-article")[index].classList.add("selected");
console.log("li.main-article")
}
function query(selector) {
return document.querySelectorAll(selector)
}
}
</script>
</body>
</html>
sylow-castle