动态增加选项卡
效果如下:
源码如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8"/>
- <title > 动态增加选项卡页面的演示 </title>
- <link rel="stylesheet" href="//cdn.amazeui.org/amazeui/2.7.2/CSS/amazeui.min.css">
- <link href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
- <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
- <script src="https://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 class="container">
- <p class="am-tabs" data-am-tabs="{noSwipe: 1}" id="doc-tab-demo-1">
- <ul class="am-tabs-nav am-nav am-nav-tabs">
- </ul>
- <p class="am-tabs-bd">
- </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 class="am-icon-close"></span><a href="javascript: void(0)"> 标签' + tabCounter + '</a></li>';
- var content = '<p id=' + tabCounter + 'class="am-tab-panel"> 动态插入的标签内容' + 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>
来源: https://www.2cto.com/kf/201802/724650.html