recherche

Maison >interface Web >tutoriel CSS >Ajouter dynamiquement le partage de code d'instance d'onglet

Ajouter dynamiquement le partage de code d'instance d'onglet

小云云
小云云original
2018-02-28 09:48:342007parcourir

Cet article partage principalement avec vous l'exemple de code d'ajout dynamique d'onglets. Nous partagerons les rendus avec vous à la fin, en espérant aider tout le monde.

Le code source est le suivant : 

<!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>

L'effet est le suivant :

Recommandations associées :

html+ css+jquery pour créer des onglets

Deux méthodes jQuery pour implémenter la fonction d'onglet

Explication détaillée du plug-in JavaScript Onglet Onglet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：HTML et CSS implémentent un partage simple de code de blogArticle suivant：HTML et CSS implémentent un partage simple de code de blog

Articles Liés

Voir plus