本文主要和大家分享动态增加选项卡实例代码，效果图我们会在最后分享给大家，希望能帮助到大家。
源码如下：
nbsp;html>动态增加选项卡页面的演示 .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; }
登录后复制
$(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 = '
动态插入的标签内容' + tabCounter + ''; $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'); }); });
效果如下：
相关推荐：
html+css+jquery做选项卡
两种jQuery实现选项卡功能的方法
JavaScript插件Tab选项卡详解
以上就是动态增加选项卡实例代码分享的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2900084.html
