<!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.setItem(‘tab’, ”)
var tab = localStorage.getItem(‘tab’)
if (tab){
$(“ul.tabs”).append(tab.replace(/ /g, ”));
}
if (tab){
$(“ul.tabs”).empty();
$(“ul.tabs”).append(tab);
}
//When page loads…
$(“.tadkb_content”).hide(); //Hide all content
//$(“udkl.tabs li:first”).addClass(“active”).show(); //Activate first tab
//$(“.dktab_content:first”).show(); //Show first tab content
var activeTab = localStorage.getItem(‘activeTab’);
// if (activeTab){
// var num = activeTab.replace(/#tab/,”)-1;
// }else{
// num = 0;
// }
// console.log(‘num’,activeTab);
$(“ul.tabs li a”).each(function () {
var ehref = $(this).attr(“href”);
console.log(ehref, ‘=’, activeTab)
if (ehref == activeTab) {
$(this).parent().addClass(“active”).show();
}else{
$(this).parent().not(‘li:first’).removeClass(“active”);
}
});
//console.log(‘oblllllllllllllll’, $ob, ‘href:”‘+ activeTab +'”‘)
//.parent().addClass(“active”).show();
//$(activeTab).fadeIn(); //Fade in the active ID content
console.log(‘aaativetab load’, activeTab);
//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(‘activeTab’, activeTab);
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
function addTab(tabIdx, tabTitle){
sTab = ‘<li><a href=”#tab’+ tabIdx +'”>’+ tabTitle +'</a><input type=”button” value=”x” class=”removeTab”/></li>’;
$(‘.tabs’).append(sTab);
//load content
// $(“.tab_container”).load(“tab_content.txt”, function(responseTxt, statusTxt, xhr){
// if(statusTxt == “success”)
// alert(“External content loaded successfully!”);
// if(statusTxt == “error”)
// alert(“Error: ” + xhr.status + “: ” + xhr.statusText);
// });
var pre_tab = localStorage.getItem(‘tab’)
if(pre_tab){
sTab = pre_tab +’ ’ + sTab ;
sTab = sTab.replace(/ /, ”);
}
localStorage.setItem(‘tab’, sTab)
$(“ul.tabs li:last-child”).trigger(‘click’);
}
$(“ul.tabs”).on(‘click’,’li input’, function(e){
console.log(‘e.target’, e.target)
e.stopImmediatePropagation()
//var currentIdx = $(this).parent().index();
$(this).parent().remove();
var currentTabs = $(“ul.tabs”).html();
console.log(typeof currentTbbs)
//var storedTab = localStorage.getItem(‘tab’)
// if (storedTab){
// arrTabs = currentTabs.split(‘ ’)
// arrTabs.splice(currentIdx, 1)
// var currentTabs = arrTabs.join(‘ ’)
// }
//localStorage.setItem(‘tab’, ”)
localStorage.setItem(‘tab’, currentTabs)
var last_idx = $(“ul.tabs”).find(‘li’).length;
var activeTab = $(“ul.tabs li a:last”).attr(“href”);
//console.log(‘last-child’, last_idx)
localStorage.setItem(‘activeTab’, activeTab);
//var activeTab = “#tab”+last_idx;
//$(“ul.tabs li”).eq(last_idx).addClass(“active”).show();
//$(activeTab).fadeIn(); //Fade in the active ID content
$(“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)
})
});
</script>
</head>
<body>
<div id=”wrapper”>
<input type=”button” id=”btnAdd”>tab add</div>
<!–탭 메뉴 영역 –>
<ul class=”tabs”>
<li><a href=”#tab1″>tab1</a>
<span class=”removeTab”>x</span>
</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>
