堆栈内存溢出
  简体   繁体   English

如何创建动态标签内容

[英]How can Create dynamic tab content

 原文  2016-07-20 09:59:01  2   2    javascript/ jquery/ jquery-ui/ jquery-mobile

问题描述

I have a first tab in my application, 我的应用程序中有第一个标签，

I want to know if it's possible to create a new tab when I click on my bouton ? 我想知道当单击我的按钮时是否可以创建一个新选项卡吗？ 

 <html> <head> <title>How to Create dynamic tab content</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> $(document).ready(function() { $('.nav-tabs > li > a').click(function(event){ event.preventDefault();//stop browser to take action for clicked anchor //get displaying tab content jQuery selector var active_tab_selector = $('.nav-tabs > li.active > a').attr('href'); //find actived navigation and remove 'active' css var actived_nav = $('.nav-tabs > li.active'); actived_nav.removeClass('active'); //add 'active' css into clicked navigation $(this).parents('li').addClass('active'); //hide displaying tab content $(active_tab_selector).removeClass('active'); $(active_tab_selector).addClass('hide'); //show target tab content var target_tab_selector = $(this).attr('href'); $(target_tab_selector).removeClass('hide'); $(target_tab_selector).addClass('active'); }); }); </script> <style> /** Start: to style navigation tab **/ .nav { margin-bottom: 18px; margin-left: 0; list-style: none; } .nav > li > a { display: block; } .nav-tabs{ *zoom: 1; } .nav-tabs:before, .nav-tabs:after { display: table; content: ""; } .nav-tabs:after { clear: both; } .nav-tabs > li { float: left; } .nav-tabs > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; line-height: 14px; } .nav-tabs { border-bottom: 1px solid #ddd; } .nav-tabs > li { margin-bottom: -1px; } .nav-tabs > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 18px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #dddddd; } .nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; } li { line-height: 18px; } .tab-content.active{ display: block; } .tab-content.hide{ display: none; } /** End: to style navigation tab **/ </style> </head> <body> <div> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab1">Show Tab 1</a> </li> </ul> </div> <section id="tab1" class="tab-content active"> <div> <a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Open</a> </div> <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">    <form>        <div style="padding:10px 20px;">            <h3>Create new tab</h3>            <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Create Me !</button>        </div>    </form> </div> </section> </body> </html>

2 个解决方案

解决方案1
 1  2016-07-20 10:28:11

Use append to build your tab 使用追加来建立标签 

 <html> <head> <title>How to Create dynamic tab content</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> $(document).ready(function() { $('.nav-tabs > li > a').click(function(event) { event.preventDefault(); //stop browser to take action for clicked anchor //get displaying tab content jQuery selector var active_tab_selector = $('.nav-tabs > li.active > a').attr('href'); //find actived navigation and remove 'active' css var actived_nav = $('.nav-tabs > li.active'); actived_nav.removeClass('active'); //add 'active' css into clicked navigation $(this).parents('li').addClass('active'); //hide displaying tab content $(active_tab_selector).removeClass('active'); $(active_tab_selector).addClass('hide'); //show target tab content var target_tab_selector = $(this).attr('href'); $(target_tab_selector).removeClass('hide'); $(target_tab_selector).addClass('active'); }); $('[type="submit"]').click(function(e) { e.preventDefault(); $('.nav').append('<li><a href="#tab2">show tab2</a></li>'); $('body').append('<section id="tab2" class="tab-content">tab2</section>') }); }); </script> <style> /** Start: to style navigation tab **/ .nav { margin-bottom: 18px; margin-left: 0; list-style: none; } .nav > li > a { display: block; } .nav-tabs { *zoom: 1; } .nav-tabs:before, .nav-tabs:after { display: table; content: ""; } .nav-tabs:after { clear: both; } .nav-tabs > li { float: left; } .nav-tabs > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; line-height: 14px; } .nav-tabs { border-bottom: 1px solid #ddd; } .nav-tabs > li { margin-bottom: -1px; } .nav-tabs > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 18px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #dddddd; } .nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; } li { line-height: 18px; } .tab-content.active { display: block; } .tab-content.hide { display: none; } /** End: to style navigation tab **/ </style> </head> <body> <div> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab1">Show Tab 1</a> </li> </ul> </div> <section id="tab1" class="tab-content active"> <div> <a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Open</a> </div> <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all"> <form> <div style="padding:10px 20px;"> <h3>Create new tab</h3> <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Create Me !</button> </div> </form> </div> </section> </body> </html>

解决方案2
 0 已采纳  2016-07-20 10:33:20

Working fiddle 工作提琴

Sure you could, you have just to attach click event to Create me button then append the new tab to the DOM. 当然可以，您只需将click事件附加到Create me按钮上，然后将新标签附加到DOM。 

$('body').on('click','#create_me',function(){
   //get the index of new tab
    var index = $('.nav-tabs li').length+1; 

    //Create new tab link
    $('.nav-tabs').append('<li><a href="#tab'+index+'">Show Tab '+index+'</a></li>');

    //Create new tab section
    $('.ui-page').append('<section id="tab'+index+'" class="tab-content hide">Tab '+index+' content</section>');

    //Close popup
    $( "#popupLogin" ).popup("close");
})

To active the newly created tab just add : 要激活新创建的标签，只需添加： 

$('a[href="#tab'+index+'"]').click();

NOTE : You have to attach click event to .nav-tabs li > a using event delegation on() so it'll be able to detect dynamically added tabs : 注意：您必须将click event附加到.nav-tabs li > a使用事件委托on（），以便它能够检测动态添加的选项卡： 

$('.nav-tabs').on('click','li > a',function(event){

Hope this helps. 希望这可以帮助。 

 $(document).ready(function() { $('body').on('click','#create_me',function(){ var index = $('.nav-tabs li').length+1; $('.nav-tabs').append('<li><a href="#tab'+index+'">Show Tab '+index+'</a></li>'); $('.ui-page').append('<section id="tab'+index+'" class="tab-content hide">Tab '+index+' content</section>'); $( "#popupLogin" ).popup( "close" ); $('a[href="#tab'+index+'"]').click(); }) $('.nav-tabs').on('click','li > a',function(event){ event.preventDefault();//stop browser to take action for clicked anchor //get displaying tab content jQuery selector var active_tab_selector = $('.nav-tabs > li.active > a').attr('href'); //find actived navigation and remove 'active' css var actived_nav = $('.nav-tabs > li.active'); actived_nav.removeClass('active'); //add 'active' css into clicked navigation $(this).parents('li').addClass('active'); //hide displaying tab content $(active_tab_selector).removeClass('active'); $(active_tab_selector).addClass('hide'); //show target tab content var target_tab_selector = $(this).attr('href'); $(target_tab_selector).removeClass('hide'); $(target_tab_selector).addClass('active'); }); }); 
 .nav { margin-bottom: 18px; margin-left: 0; list-style: none; } .nav > li > a { display: block; } .nav-tabs{ *zoom: 1; } .nav-tabs:before, .nav-tabs:after { display: table; content: ""; } .nav-tabs:after { clear: both; } .nav-tabs > li { float: left; } .nav-tabs > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; line-height: 14px; } .nav-tabs { border-bottom: 1px solid #ddd; } .nav-tabs > li { margin-bottom: -1px; } .nav-tabs > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 18px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #dddddd; } .nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; } li { line-height: 18px; } .tab-content.active{ display: block; } .tab-content.hide{ display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab1">Show Tab 1</a> </li> </ul> </div> <section id="tab1" class="tab-content active"> <div> <a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Open</a> </div> <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all"> <form> <div style="padding:10px 20px;"> <h3>Create new tab</h3> <button type="button" id='create_me' class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Create Me !</button> </div> </form> </div> </section>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在动态标签中添加内容 - How to add content in dynamic tab 如何在新标签页中加载动态网页内容 - How to load a dynamic webpage content in a new tab 如何在离子Cordova上创建制表符内容？ - How to create tab content at ionic cordova? 如何在 javascript 中的动态内容中创建动态内容 - How to create dynamic content inside dynamic content in javascript 在新标签页中打开动态内容 - Open in new tab with dynamic content Angular Material 2选项卡动态内容 - Angular Material 2 Tab Dynamic Content 如何在语法高亮中创建动态内容 - How to create dynamic content within syntaxhighlighter 在 jquery-ui 选项卡中创建动态选项卡 - Create Dynamic tab in jquery-ui tab 创建具有动态内容的图像 - Create an image with dynamic content Sencha Touch 2.1：如何创建/销毁标签内容以提高性能？ - Sencha Touch 2.1: How to create/destroy tab content to increase performance?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM