Dynamically add tab instance code sharing-CSS Tutorial-php.cn

Dynamically add tab instance code sharing

小云云

Release： 2018-02-28 09:48:34

Original

1985 people have browsed it

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>

Copy after login

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!