sokcuri · July 12, 2017 07:36
diff --git a/script.js b/script.js
 document.addEventListener('DOMContentLoaded', function () {
    registerEvents();
    loadContents();
 });

 function registerEvents() {
    setHandlerTab();
 }

 function loadContents() {
    reqContents(getJsonURL());
 }

 function setHandlerTab() {
    const navTabs = getNavTabs();
    navTabs.forEach(selectedTab => {
        selectedTab.addEventListener('click', function (evt) {
            navTabs.forEach(t => t.classList.remove('selectedTab'));
            selectedTab.classList.add('selectedTab');
            let contents = reqContents(getJsonURL(getTabNumber(selectedTab)));
        });
    });
 }

 function getNavTabs() {
    return Array.from(document.querySelectorAll('nav > .tab'));
 }

 function getJsonURL(number = 1) {
    return `http://jsonplaceholder.typicode.com/posts/${number}`;
 }

 function getTabNumber(tabElement) {
    const navTabs = getNavTabs();
    for (let i = 0; i < navTabs.length; i++) {
        if (navTabs[i] == tabElement)
            return i + 1;
    }
 }

 function reqContents(url, callback = updateDisplayText) {
    let oReq = new XMLHttpRequest();
    oReq.addEventListener('load', callback);
    oReq.open('GET', url);
    oReq.send();
 }

 function updateDisplayText() {
    var obj = JSON.parse(this.responseText);
    document.querySelector('.myName').innerText = obj.title;
    document.querySelector('.myDesc').innerText = obj.body;
 }
diff --git a/tabUI.css b/tabUI.css
 header,nav,section,div,footer,ul,dd {margin:0;padding:0;}
 li{list-style: none;}
 dt {
 	font-weight: bold;
 	font-size: 1.2em;
 	margin-bottom: 5px;
 }

 dl {
 	float: left;
 	width : 75%;
 }

 dd {
 	font-size: 0.9em;
 }

 .mainHeader{
 	height:200px;
 	text-align: center;
 	padding-top: 20px;
 	line-height: 1.4em
 }

 .userId {
 	font-size: 1.2em;
    font-weight: bold;
 }

 .userMessage, .userSNSInfo {
 	font-size: 0.8em;
 	color : gray;
 }

 .userSNSInfo {
 	overflow: auto;
    width: 255px;
    margin: 0px auto;
 }

 .userSNSInfo > li {
 	float: left;
 	margin-right: 5px;
 	width : 80px;
 }

 .userSNSInfo span.count {
 	color : #1FB820;
 }

 .mainView > nav {
 	height:40px;
 	margin-top: 10px;
 	overflow: auto;
 	border-bottom: 1px solid rgb(228, 228, 228);
 	border-top: 1px solid rgb(228, 228, 228);
 }

 .tab {
 	border-right: 1px solid rgb(228, 228, 228);
 	float:left;
 	height:100%;
 	line-height: 40px;
 	text-align: center;
 	width:24.5%;
 	cursor: pointer;
 }

 .tab:last-child {
    border-right: 0px;
 }


 .mainView > section {
 	display:none;
 	padding:8%;
 	line-height: 1.5em;
 }

 .mainView > section.eleDisplayShow {
 	display:block;
 	padding:8%;
 	line-height: 1.5em;
 }

 .myName {
    font-size: 1.2em;
    font-weight: bold;
 }

 .myDesc {
 	font-size: 0.8em;
 }

 .eleDisplayShow li {
 	margin-bottom: 8%;
 }

 .selectedTab {
 	background-color: #DF9274;
 	color: #fff;
 }
diff --git a/tabUI.html b/tabUI.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>tabUI</title>
    <link rel="stylesheet" href="tabUI.css">
    <script src=./script.js></script>
 </head>

 <body>
    <div id="wrapper">
        <div class="mainView" >
            <header class="mainHeader" ><img src="https://avatars1.githubusercontent.com/u/1456761?v=3&s=140" width="80" >
                <div class="userId" ><span > </span><span >nigayo</span><span > </span>
                </div>
                <div class="userMessage" ><span > </span><span >안녕하세요 nigayo입니다.</span><span > </span>
                </div>
                <ul class="userSNSInfo" >
                    <li ><span >review : </span><span class="count" >10</span><span > | </span>
                    </li>
                    <li ><span >follower : </span><span class="count" ><span >12</span><span > </span></span><span > | </span>
                    </li>
                    <li ><span >following : </span><span class="count" ><span >30</span><span > </span></span><span > </span>
                    </li>
                </ul>
            </header>
            <nav >
                <div class="tab selectedTab" id="position" ><span > </span><span >aboutMe</span><span > </span>
                </div>
                <div class="tab" id="friend" ><span > </span><span >friend</span><span > </span>
                </div>
                <div class="tab" id="theme" ><span > </span><span >lorem</span><span > </span>
                </div>
                <div class="tab" id="news" ><span > </span><span >repository</span><span > </span>
                </div>
            </nav>
            <section id="my_position" class="eleDisplayShow" >
                <ul >
                    <li >
                        <div class="myName" >blah blah !</div>
                        <div class="myDesc" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque recusandae hic obcaecati maxime officiis commodi! Cumque maiores maxime quam quidem deleniti, aspernatur iste, minima sit laboriosam laudantium saepe dignissimos provident.</div>
                    </li>
                </ul>
            </section>
            <section id="my_friend"> </section>
            <section id="my_theme" > </section>
            <section id="my_news"> </section>
        </div>
    </div>
 </body>
 </html>
	document.addEventListener('DOMContentLoaded', function () {
	registerEvents();
	loadContents();
	});

	function registerEvents() {
	setHandlerTab();
	}

	function loadContents() {
	reqContents(getJsonURL());
	}

	function setHandlerTab() {
	const navTabs = getNavTabs();
	navTabs.forEach(selectedTab => {
	selectedTab.addEventListener('click', function (evt) {
	navTabs.forEach(t => t.classList.remove('selectedTab'));
	selectedTab.classList.add('selectedTab');
	let contents = reqContents(getJsonURL(getTabNumber(selectedTab)));
	});
	});
	}

	function getNavTabs() {
	return Array.from(document.querySelectorAll('nav > .tab'));
	}

	function getJsonURL(number = 1) {
	return `http://jsonplaceholder.typicode.com/posts/${number}`;
	}

	function getTabNumber(tabElement) {
	const navTabs = getNavTabs();
	for (let i = 0; i < navTabs.length; i++) {
	if (navTabs[i] == tabElement)
	return i + 1;
	}
	}

	function reqContents(url, callback = updateDisplayText) {
	let oReq = new XMLHttpRequest();
	oReq.addEventListener('load', callback);
	oReq.open('GET', url);
	oReq.send();
	}

	function updateDisplayText() {
	var obj = JSON.parse(this.responseText);
	document.querySelector('.myName').innerText = obj.title;
	document.querySelector('.myDesc').innerText = obj.body;
	}
	header,nav,section,div,footer,ul,dd {margin:0;padding:0;}
	li{list-style: none;}
	dt {
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 5px;
	}

	dl {
	float: left;
	width : 75%;
	}

	dd {
	font-size: 0.9em;
	}

	.mainHeader{
	height:200px;
	text-align: center;
	padding-top: 20px;
	line-height: 1.4em
	}

	.userId {
	font-size: 1.2em;
	font-weight: bold;
	}

	.userMessage, .userSNSInfo {
	font-size: 0.8em;
	color : gray;
	}

	.userSNSInfo {
	overflow: auto;
	width: 255px;
	margin: 0px auto;
	}

	.userSNSInfo > li {
	float: left;
	margin-right: 5px;
	width : 80px;
	}

	.userSNSInfo span.count {
	color : #1FB820;
	}

	.mainView > nav {
	height:40px;
	margin-top: 10px;
	overflow: auto;
	border-bottom: 1px solid rgb(228, 228, 228);
	border-top: 1px solid rgb(228, 228, 228);
	}

	.tab {
	border-right: 1px solid rgb(228, 228, 228);
	float:left;
	height:100%;
	line-height: 40px;
	text-align: center;
	width:24.5%;
	cursor: pointer;
	}

	.tab:last-child {
	border-right: 0px;
	}


	.mainView > section {
	display:none;
	padding:8%;
	line-height: 1.5em;
	}

	.mainView > section.eleDisplayShow {
	display:block;
	padding:8%;
	line-height: 1.5em;
	}

	.myName {
	font-size: 1.2em;
	font-weight: bold;
	}

	.myDesc {
	font-size: 0.8em;
	}

	.eleDisplayShow li {
	margin-bottom: 8%;
	}

	.selectedTab {
	background-color: #DF9274;
	color: #fff;
	}
	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<title>tabUI</title>
	<link rel="stylesheet" href="tabUI.css">
	<script src=./script.js></script>
	</head>

	<body>
	<div id="wrapper">
	<div class="mainView" >
	<header class="mainHeader" ><img src="https://avatars1.githubusercontent.com/u/1456761?v=3&s=140" width="80" >
	<div class="userId" ><span > </span><span >nigayo</span><span > </span>
	</div>
	<div class="userMessage" ><span > </span><span >안녕하세요 nigayo입니다.</span><span > </span>
	</div>
	<ul class="userSNSInfo" >
	<li ><span >review : </span><span class="count" >10</span><span > \| </span>
	</li>
	<li ><span >follower : </span><span class="count" ><span >12</span><span > </span></span><span > \| </span>
	</li>
	<li ><span >following : </span><span class="count" ><span >30</span><span > </span></span><span > </span>
	</li>
	</ul>
	</header>
	<nav >
	<div class="tab selectedTab" id="position" ><span > </span><span >aboutMe</span><span > </span>
	</div>
	<div class="tab" id="friend" ><span > </span><span >friend</span><span > </span>
	</div>
	<div class="tab" id="theme" ><span > </span><span >lorem</span><span > </span>
	</div>
	<div class="tab" id="news" ><span > </span><span >repository</span><span > </span>
	</div>
	</nav>
	<section id="my_position" class="eleDisplayShow" >
	<ul >
	<li >
	<div class="myName" >blah blah !</div>
	<div class="myDesc" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque recusandae hic obcaecati maxime officiis commodi! Cumque maiores maxime quam quidem deleniti, aspernatur iste, minima sit laboriosam laudantium saepe dignissimos provident.</div>
	</li>
	</ul>
	</section>
	<section id="my_friend"> </section>
	<section id="my_theme" > </section>
	<section id="my_news"> </section>
	</div>
	</div>
	</body>
	</html>