如何创建动态标签内容

【问题标题】：How can Create dynamic tab content如何创建动态标签内容
【发布时间】：2016-11-23 12:05:13
【问题描述】：

我的应用程序中有第一个选项卡，

我想知道当我点击我的按钮时是否可以创建一个新标签？

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

【问题讨论】：

标签： javascript jquery jquery-ui jquery-mobile


【解决方案1】：

使用 append 来构建你的标签

<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】：

    Working fiddle

    当然可以，您只需将点击事件附加到 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");
})

    要激活新创建的标签，只需添加：

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

    注意：您必须使用事件委托 on() 将点击事件附加到 .nav-tabs li &gt; a，以便它能够检测动态添加的标签：

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

    希望这会有所帮助。

    $(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>

    【讨论】：

    • 谢谢，所以我有一个问题，如何专注于我们刚刚创建的新标签
    • 不客气，很高兴我能帮上忙...查看我的更新，您只需点击新标签链接$('a[href="#tab'+index+'"]').click();。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-02-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-24
    • 2013-01-16
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode