如何创建动态选项卡内容

Question

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

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

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

Answer 1

使用追加来构建你的标签

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

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

如何创建动态选项卡内容

How can Create dynamic tab content

javascript

jquery

jquery-ui

jquery-mobile