动态增加选项卡实例代码分享

2020-11-27 来源：星星旅游

本文主要和大家分享动态增加选项卡实例代码，效果图我们会在最后分享给大家，希望能帮助到大家。

源码如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>动态增加选项卡页面的演示</title>
 <link rel="stylesheet" href="//cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css">
 <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
 <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js" type="text/javascript"></script>
 <style type="text/css">
 .am-tabs-nav li {
 position: relative;
 z-index: 1;
 }
 .am-tabs-nav .am-icon-close {
 position: absolute;
 top: 0;
 right: 10px;
 color: #888;
 cursor: pointer;
 z-index: 100;
 }
 .am-tabs-nav .am-icon-close:hover {
 color: #333;
 }
 .am-tabs-nav .am-icon-close ~ a {
 padding-right: 25px !important;
 }
 </style>
</head>
<body>
<p>
 <p data-am-tabs="{noSwipe: 1}" id="doc-tab-demo-1">
 <ul class="am-tabs-nav am-nav am-nav-tabs">
 
 </ul>
 <p>
 
 </p>
 </p>
 <button type="button" class="am-btn am-btn-primary js-append-tab">插入 Tab</button>
</p>
<script>
 $(function () {
 var tabCounter = 0;
 var $tab = $('#doc-tab-demo-1');
 var $nav = $tab.find('.am-tabs-nav');
 var $bd = $tab.find('.am-tabs-bd');
 function addTab() {
 var nav = '<li id=' + tabCounter + '><span></span><a href="javascript: void(0)">标签' + tabCounter + '</a></li>';
 var content = '<p id=' + tabCounter + '>动态插入的标签内容' + tabCounter + '</p>';
 $nav.append(nav);
 $bd.append(content);
 tabCounter++;
 $tab.tabs('refresh');
 }
 // 动态添加标签页
 $('.js-append-tab').on('click', function () {
 addTab();
 });
 // 移除标签页
 $nav.on('click', '.am-icon-close', function () {
 var $item = $(this).closest('li');
 var index = $nav.children('li').index($item);
 $item.remove();
 tabCounter--;
 $bd.find('.am-tab-panel').eq(index).remove();
 $tab.tabs('open', index > 0 ? index - 1 : index + 1);
 $tab.tabs('refresh');
 });
 });
</script>
</body>
</html>

效果如下：

全部栏目

动态增加选项卡实例代码分享