search

Home >Web Front-end >CSS Tutorial >Dynamically add tab instance code sharing

Dynamically add tab instance code sharing

小云云
小云云Original
2018-02-28 09:48:342010browse

This article mainly shares with you the example code of dynamically adding tabs. We will share the renderings with you at the end, hoping to help everyone.

The source code is as follows: 

<!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 = $(&#39;#doc-tab-demo-1&#39;);
        var $nav = $tab.find(&#39;.am-tabs-nav&#39;);
        var $bd = $tab.find(&#39;.am-tabs-bd&#39;);
        function addTab() {
            var nav = &#39;<li id=&#39; + tabCounter + &#39;><span></span><a href="javascript: void(0)">标签&#39; + tabCounter + &#39;</a></li>&#39;;
            var content = &#39;<p id=&#39; + tabCounter + &#39;>动态插入的标签内容&#39; + tabCounter + &#39;</p>&#39;;
            $nav.append(nav);
            $bd.append(content);
            tabCounter++;
            $tab.tabs(&#39;refresh&#39;);
        }
        // 动态添加标签页
        $(&#39;.js-append-tab&#39;).on(&#39;click&#39;, function () {
            addTab();
        });
        // 移除标签页
        $nav.on(&#39;click&#39;, &#39;.am-icon-close&#39;, function () {
            var $item = $(this).closest(&#39;li&#39;);
            var index = $nav.children(&#39;li&#39;).index($item);
            $item.remove();
            tabCounter--;
            $bd.find(&#39;.am-tab-panel&#39;).eq(index).remove();
            $tab.tabs(&#39;open&#39;, index > 0 ? index - 1 : index + 1);
            $tab.tabs(&#39;refresh&#39;);
        });
    });
</script>
</body>
</html>

The effect is as follows:

##Related recommendations:

html+css+ jquery makes tabs

Two jQuery methods to implement tab function

Detailed explanation of JavaScript plug-in Tab

The above is the detailed content of Dynamically add tab instance code sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML and csss implement simple blog code sharingNext article：HTML and csss implement simple blog code sharing

Related articles

See more