<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>选项卡</title>
<link rel="stylesheet" href="">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style type="text/css" media="screen">
.colora{
color: #f00;
}
.tabsshow{
display: block;
}
</style>
<body>
<button type="button" class="btnAdd">添加</button>
<ul class="title">
</ul>
<ul class="tabs">
</ul>
<script type="text/javascript">
$('.btnAdd').click(function(event) {
var len = $('.title li').length;
var math = Date.parse(new Date()) + Math.random();
if( len < 10){
$('.title li.remove').removeClass('colora');
$('.tabs li.mremove').css('display','none');
$('.title').append('<li class="remove colora" lang="'+math+'">选项'+math+'<span>×</span></li>');
$('.tabs').append('<li class="mremove tabsshow" lang="'+math+'">内容'+math+'</li>');
}
});
$(document).on('click','.remove span',function(){
var atr = $(this).parent('li').attr('lang');
if($(this).parent('li').hasClass('colora')){
$(this).parent('li').remove();
$('.remove:last-child').addClass('colora');
$('.tabs li').each(function(){
if($(this).attr('lang') == atr){
$(this).remove();
var num = $('.tabs li').length - 1;
console.log(num);
$('.tabs li').eq(num).addClass('tabsshow').css('display','block');
}
})
}else{
$(this).parent('li').remove();
$('.tabs li').each(function(){
if($(this).attr('lang') == atr){
$(this).remove();
}
})
}
})
$(document).on('click','.remove',function(){
var atr = $(this).attr('lang');
$('.title li.remove').removeClass('colora');
$(this).addClass('colora');
$('.tabs li').each(function(){
if($(this).attr('lang') == atr){
$('.tabs li.mremove').css('display','none');
$(this).css('display','block');
}
})
})
</script>
</body>
</html>