{"id":746,"date":"2021-11-08T22:58:55","date_gmt":"2021-11-08T13:58:55","guid":{"rendered":"http:\/\/www.onepage.co.kr\/wordpress\/?p=746"},"modified":"2021-11-08T23:53:21","modified_gmt":"2021-11-08T14:53:21","slug":"tab-menu-sample2","status":"publish","type":"post","link":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/2021\/11\/08\/tab-menu-sample2\/","title":{"rendered":"tab menu sample2"},"content":{"rendered":"
\n
tabExam01<\/a><!DOCTYPE html><\/div>\n
<html lang=”ko-KR”><\/div>\n
<head><\/div>\n
\u00a0 \u00a0 <meta charset=”UTF-8″><\/div>\n
\u00a0 \u00a0 <title>Document<\/title><\/div>\n
\u00a0 \u00a0 <style type=”text\/css”><\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 body {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-family:”Malgun Gothic”;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-size: 0.8em;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/*TAB CSS*\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 ul.tabs {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 margin: 0;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 padding: 0;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 float: left;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 list-style: none;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 32px; \/*–Set height of tabs–*\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-bottom: 1px solid #999;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-left: 1px solid #999;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: 100%;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 ul.tabs li {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 float: left;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 margin: 0;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 padding: 0;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 31px; \/*–Subtract 1px from the height of the unordered list–*\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 line-height: 31px; \/*–Vertically aligns the text within the tab–*\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border: 1px solid #999;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-left: none;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 margin-bottom: -1px; \/*–Pull the list item down 1px–*\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 overflow:inherit;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 position: relative;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background: #e0e0e0;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 ul.tabs li a {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 text-decoration: none;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: #000;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: block;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-size: 1.2em;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 padding: 0 20px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/*–Gives the bevel look with a 1px white border inside the list item–*\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border: 1px solid #fff;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 outline: none;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 ul.tabs li a:hover {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background: #ccc;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 html ul.tabs li.active, html ul.tabs li.active a:hover \u00a0{<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/*–Makes sure that the active tab does not listen to the hover properties–*\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background: #fff;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/*–Makes the active tab look like it’s connected with its content–*\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-bottom: 1px solid #fff;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/*Tab Conent CSS*\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .tab_container {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border: 1px solid #999;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-top: none;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 overflow: hidden;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 clear: both;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 float: left;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: 100%;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background: #fff;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .tab_content {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 padding: 20px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-size: 1.2em;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 <\/style><\/div>\n
\u00a0 \u00a0 <script type=”text\/javascript” src=”http:\/\/code.jquery.com\/jquery-1.8.3.min.js”><\/script><\/div>\n
\u00a0 \u00a0 <script type=”text\/javascript”><\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 $(document).ready(function() {<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var tab = localStorage.getItem(‘tab’)<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (tab){<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“ul.tabs”).empty();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“ul.tabs”).append(tab);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/When page loads…<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“.tab_content”).hide(); \/\/Hide all content<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var activeTab = $(this).find(“.active a”).attr(“href”);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(“aaa”, activeTab)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (typeof activeTab == “undefined”) {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/if (activeTab === undefined) {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“ul.tabs li:first”).addClass(“active”).show(); \/\/Activate first tab<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“.tab_content”).show(); \/\/Show first tab content<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“.tab_container #tab1”).load(“tab_content2.txt”, function (responseTxt, statusTxt, xhr) {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (statusTxt == “success”)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(“External content loaded successfully!”);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (statusTxt == “error”)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(“Error: ” + xhr.status + “: ” + xhr.statusText);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“.tab_container #tab2”).load(“tab_content.txt”, function (responseTxt, statusTxt, xhr) {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (statusTxt == “success”)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(“External content loaded successfully!”);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (statusTxt == “error”)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(“Error: ” + xhr.status + “: ” + xhr.statusText);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 sTab = $(“ul.tabs”).html();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 localStorage.setItem(‘tab’, sTab)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }else{<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(“load activeTab data”, activeTab)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“.tab_container”).load(“tab_content.txt”, function (responseTxt, statusTxt, xhr) {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (statusTxt == “success”)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(“External content loaded successfully!”);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (statusTxt == “error”)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(“Error: ” + xhr.status + “: ” + xhr.statusText);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 sTab = $(“ul.tabs”).html();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 localStorage.setItem(‘tab’, sTab)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(‘load activeTab’, activeTab)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/$(activeTab).fadeIn();<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/On Click Event<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“ul.tabs”).on(‘click’, ‘li’, function(e) {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(‘e.target1’, e.target)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 e.stopImmediatePropagation()<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“ul.tabs li”).removeClass(“active”); \/\/Remove any “active” class<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(this).addClass(“active”); \/\/Add “active” class to selected tab<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“.tab_content”).hide(); \/\/Hide all tab content<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var activeTab = $(this).find(“a”).attr(“href”); \/\/Find the href attribute value to identify the active tab + content<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“.tab_container”).load(“tab_content.txt”, function (responseTxt, statusTxt, xhr) {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (statusTxt == “success”)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(“External content loaded successfully!”);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (statusTxt == “error”)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(“Error: ” + xhr.status + “: ” + xhr.statusText);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(‘activetab h’, activeTab);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/localStorage.setItem(‘tab’,”);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 sTab = $(this).parent().html();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 localStorage.setItem(‘tab’,sTab )<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/localStorage.setItem(‘activeTab’, activeTab);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(activeTab).fadeIn(); \/\/Fade in the active ID content<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return false;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ delete tab<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“ul.tabs”).on(‘click’,’li input’, function(e){<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(‘e.target’, e.target)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 e.stopImmediatePropagation()<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/var currentIdx = $(this).parent().index();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/console.log(‘currentIdx’, currentIdx)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/if (currentIdx == 0) return false;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(this).parent().remove();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var currentTabs = $(“ul.tabs”).html();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0console.log(typeof currentTabs)<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/localStorage.setItem(‘tab’, ”)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 localStorage.setItem(‘tab’, currentTabs)<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“ul.tabs li:last-child”).trigger(‘click’);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ console.log(‘aaativetab del’, activeTab);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log($(this));<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 })<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“#btnAdd”).on(‘click’, function(e){<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 e.stopImmediatePropagation()<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var tabIdx = $(“ul.tabs li”).length+1;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(tabIdx)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var tabTitle = “tab” + tabIdx;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var dt = new Date()<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 tabIdx = dt.getMilliseconds()<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 addTab(tabIdx, tabTitle)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 })<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 });<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 function addTab(tabIdx, tabTitle){<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 sTab = ‘<li><a href=”#tab’+ tabIdx +'”>’+ tabTitle +'<\/a><input type=”button” value=”x” class=”removeTab”\/><\/li>’;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(‘.tabs’).append(sTab);<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 sTab = $(‘.tabs’).html();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/localStorage.setItem(‘tab’,”)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 localStorage.setItem(‘tab’, sTab)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(“ul.tabs li:last-child”).trigger(‘click’);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 <\/script><\/div>\n
<\/head><\/div>\n
<body><\/div>\n
<div id=”wrapper”><\/div>\n
<\/div>\n
\u00a0 \u00a0 <input type=”button” id=”btnAdd”>tab add<\/div><\/div>\n
\u00a0 \u00a0 <!–\ud0ed \uba54\ub274 \uc601\uc5ed –><\/div>\n
\u00a0 \u00a0 <ul class=”tabs”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <li><a href=”#tab1″>tab1<\/a><\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/li><\/div>\n
<\/div>\n
\u00a0 \u00a0 <\/ul><\/div>\n
\u00a0 \u00a0 <!–\ud0ed \ucf58\ud150\uce20 \uc601\uc5ed –><\/div>\n
\u00a0 \u00a0 <div class=”tab_container”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div id=”tab1″ class=”tab_content”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <!–Content–><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h1>tab1\uc601\uc5ed<\/h1><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \ub0b4\uc6a9 \ub0b4\uc6a9 \ub0b4\uc6a9 \ub0b4\uc6a9 \ub0b4\uc6a9 \ub0b4\uc6a9 <br\/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \uc790\ubc14\ud0b9 \ube14\ub85c\uadf8 :<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <a href=”http:\/\/javaking75.blog.me”>javaking75.blog.me<\/a><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div id=”tab2″ class=”tab_content”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Content<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<h1>tab2\uc601\uc5ed<\/h1><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\ub0b4\uc6a9 \ub0b4\uc6a9 \ub0b4\uc6a9 \ub0b4\uc6a9 \ub0b4\uc6a9 \ub0b4\uc6a9<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div> –><\/div>\n
\u00a0 \u00a0 <\/div><\/div>\n
<\/div><\/div>\n
<\/body><\/div>\n
<\/html><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

tabExam01<!DOCTYPE html> <html lang=”ko-KR”> <head> \u00a0 \u00a0 <meta charset=”UTF-8″> \u00a0 \u00a0 <title>Document<\/title> \u00a0 \u00a0 <style type=”text\/css”> \u00a0 \u00a0 \u00a0 \u00a0 body { \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-family:”Malgun Gothic”; \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-size: 0.8em; \u00a0 \u00a0 \u00a0 \u00a0 } \u00a0 \u00a0 \u00a0 \u00a0 \/*TAB CSS*\/ \u00a0 \u00a0 \u00a0 \u00a0 ul.tabs { […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-746","post","type-post","status-publish","format-standard","hentry","category-java-jsp-spring"],"_links":{"self":[{"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/746","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=746"}],"version-history":[{"count":3,"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/746\/revisions"}],"predecessor-version":[{"id":752,"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/746\/revisions\/752"}],"wp:attachment":[{"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}