可打开可关闭的选项卡，单纯无污染，改改样式就能用

<!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>

</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>

转载于:https://www.cnblogs.com/branton-design/p/8030646.html

可打开可关闭的选项卡，单纯无污染，改改样式就能用相关推荐

versa max_如何从Mac（和Vice Versa）打开或关闭iPhone的Safari选项卡
versa max Many of us are familiar with this scenario: you're looking something up on our iPhone, fin ...
easyui打开新的选项卡_【easyui右键关闭选项卡】easyui关闭选项卡_easyui关闭当前选项卡...
2015-09-09 15:30:24 近来,有些win10系统反映自己的电脑在自动更新驱动程序之后,在桌面上点击右键时,发现菜单栏里多出了NVIDIA面板或者AIT催化剂等选项,看着很不舒服.那么, ...
ubuntu 如何关闭离线模式_如何在macOS中打开或关闭Mac暗黑模式
苹果在macOS Mojave中为Mac引入了暗模式.暗模式是系统级别的设置,可与Mac随附的所有应用一起使用.第三方应用也可以选择使用暗黑模式.暗黑模式使您更轻松地专注于工作,并且对眼睛也很容易.装 ...
系统重装助手教你如何在Microsoft Edge中恢复“关闭所有选项卡”警告
在Microsoft Edge中,当您打开多个选项卡时,浏览器将显示"您要关闭所有选项卡吗?" 警告,以防止您意外关闭重要标签. 通常,在没有第二个想法的情况下,您会立即禁用此功能 ...
谷歌正在移除 Chrome 的“关闭其他选项卡”选项
为了减少 Chrome 选项卡上下文菜单中的杂乱,谷歌决定删除"关闭其他选项卡"选项以及其他功能,因为它们并不常用. 自 2015 年以来,谷歌 Chrome 开发人员就表示过,希 ...
RMS Server打开或关闭日志记录
原文: https://technet.microsoft.com/zh-cn/library/cc732758 在 Active Directory Rights Management Servic ...
chrome硬件加速_如何在Chrome中打开和关闭硬件加速
chrome硬件加速 Google Chrome comes equipped with hardware acceleration, a feature which takes advantage ...
C++ 笔记（21）— 处理文件（文件打开、关闭、读取、写入）
C++ 提供了 std::fstream ,旨在以独立于平台的方式访问文件. std::fstream 从 std::ofstream 那里继承了写入文件的功能,并从 std::ifstream 那里 ...
Matlab学习笔记——文件的打开与关闭
写在这里的初衷,一是备忘,二是希望得到高人指点,三是希望能遇到志同道合的朋友. 目录文件的打开与关闭 1.fopen函数 2.fclose函数文件的打开与关闭 1.fopen函数用于打开文件,其 ...

可打开可关闭的选项卡，单纯无污染，改改样式就能用

可打开可关闭的选项卡，单纯无污染，改改样式就能用相关推荐

最新文章

热门文章