tabExam01<!DOCTYPE html>
<html lang=”ko-KR”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
body {
font-family:”Malgun Gothic”;
font-size: 0.8em;
}
/*TAB CSS*/
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*–Set height of tabs–*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*–Subtract 1px from the height of the unordered list–*/
line-height: 31px; /*–Vertically aligns the text within the tab–*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*–Pull the list item down 1px–*/
overflow:inherit;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
/*–Gives the bevel look with a 1px white border inside the list item–*/
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
/*–Makes sure that the active tab does not listen to the hover properties–*/
background: #fff;
/*–Makes the active tab look like it’s connected with its content–*/
border-bottom: 1px solid #fff;
}
/*Tab Conent CSS*/
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left;
width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
</style>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.3.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
var tab = localStorage.getItem(‘tab’)
if (tab){
$(“ul.tabs”).empty();
$(“ul.tabs”).append(tab);
}
//When page loads…
$(“.tab_content”).hide(); //Hide all content
var activeTab = $(this).find(“.active a”).attr(“href”);
console.log(“aaa”, activeTab)
if (typeof activeTab == “undefined”) {
//if (activeTab === undefined) {
$(“ul.tabs li:first”).addClass(“active”).show(); //Activate first tab
$(“.tab_content”).show(); //Show first tab content
$(“.tab_container #tab1”).load(“tab_content2.txt”, function (responseTxt, statusTxt, xhr) {
if (statusTxt == “success”)
console.log(“External content loaded successfully!”);
if (statusTxt == “error”)
console.log(“Error: ” + xhr.status + “: ” + xhr.statusText);
});
$(“.tab_container #tab2”).load(“tab_content.txt”, function (responseTxt, statusTxt, xhr) {
if (statusTxt == “success”)
console.log(“External content loaded successfully!”);
if (statusTxt == “error”)
console.log(“Error: ” + xhr.status + “: ” + xhr.statusText);
});
sTab = $(“ul.tabs”).html();
localStorage.setItem(‘tab’, sTab)
}else{
console.log(“load activeTab data”, activeTab)
$(“.tab_container”).load(“tab_content.txt”, function (responseTxt, statusTxt, xhr) {
if (statusTxt == “success”)
console.log(“External content loaded successfully!”);
if (statusTxt == “error”)
console.log(“Error: ” + xhr.status + “: ” + xhr.statusText);
});
sTab = $(“ul.tabs”).html();
localStorage.setItem(‘tab’, sTab)
}
console.log(‘load activeTab’, activeTab)
//$(activeTab).fadeIn();
//On Click Event
$(“ul.tabs”).on(‘click’, ‘li’, function(e) {
console.log(‘e.target1’, e.target)
e.stopImmediatePropagation()
$(“ul.tabs li”).removeClass(“active”); //Remove any “active” class
$(this).addClass(“active”); //Add “active” class to selected tab
$(“.tab_content”).hide(); //Hide all tab content
var activeTab = $(this).find(“a”).attr(“href”); //Find the href attribute value to identify the active tab + content
$(“.tab_container”).load(“tab_content.txt”, function (responseTxt, statusTxt, xhr) {
if (statusTxt == “success”)
console.log(“External content loaded successfully!”);
if (statusTxt == “error”)
console.log(“Error: ” + xhr.status + “: ” + xhr.statusText);
});
console.log(‘activetab h’, activeTab);
//localStorage.setItem(‘tab’,”);
sTab = $(this).parent().html();
localStorage.setItem(‘tab’,sTab )
//localStorage.setItem(‘activeTab’, activeTab);
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
// delete tab
$(“ul.tabs”).on(‘click’,’li input’, function(e){
console.log(‘e.target’, e.target)
e.stopImmediatePropagation()
//var currentIdx = $(this).parent().index();
//console.log(‘currentIdx’, currentIdx)
//if (currentIdx == 0) return false;
$(this).parent().remove();
var currentTabs = $(“ul.tabs”).html();
console.log(typeof currentTabs)
//localStorage.setItem(‘tab’, ”)
localStorage.setItem(‘tab’, currentTabs)
$(“ul.tabs li:last-child”).trigger(‘click’);
// console.log(‘aaativetab del’, activeTab);
console.log($(this));
})
$(“#btnAdd”).on(‘click’, function(e){
e.stopImmediatePropagation()
var tabIdx = $(“ul.tabs li”).length+1;
console.log(tabIdx)
var tabTitle = “tab” + tabIdx;
var dt = new Date()
tabIdx = dt.getMilliseconds()
addTab(tabIdx, tabTitle)
})
});
function addTab(tabIdx, tabTitle){
sTab = ‘<li><a href=”#tab’+ tabIdx +’”>’+ tabTitle +'</a><input type=”button” value=”x” class=”removeTab”/></li>’;
$(‘.tabs’).append(sTab);
sTab = $(‘.tabs’).html();
//localStorage.setItem(‘tab’,”)
localStorage.setItem(‘tab’, sTab)
$(“ul.tabs li:last-child”).trigger(‘click’);
}
</script>
</head>
<body>
<div id=”wrapper”>
<input type=”button” id=”btnAdd”>tab add</div>
<!–탭 메뉴 영역 –>
<ul class=”tabs”>
<li><a href=”#tab1″>tab1</a>
</li>
</ul>
<!–탭 콘텐츠 영역 –>
<div class=”tab_container”>
<div id=”tab1″ class=”tab_content”>
<!–Content–>
<h1>tab1영역</h1>
내용 내용 내용 내용 내용 내용 <br/>
자바킹 블로그 :
<a href=”http://javaking75.blog.me”>javaking75.blog.me</a>
</div>
<div id=”tab2″ class=”tab_content”>
Content
<h1>tab2영역</h1>
내용 내용 내용 내용 내용 내용
</div> –>
</div>
</div>
</body>
</html>