jQuery – 标签内的标签?

我正在尝试使用jQuery在选项卡内部排列选项卡。 下面是我正在使用的HTML,CSS和JS。 如何在#tab2插入几个标签?

HTML

  

test

<-- Tab 2-1 inside of #tab2

test

<-- Tab 2-2 inside of #tab2

test

CSS

 .tab_content { background:#fff;padding:10px;width:100% } .tabs li { display:inline;list-style:none } .tabs a { background:#7c7c7c;color:#dadada;display:inline-block } .tabs a.active { background:#e32d2d;color:#fff } 

JS

 jQuery('ul.tabs').each(function(){ // For each set of tabs, we want to keep track of // which tab is active and it's associated content var $active, $content, $links = jQuery(this).find('a'); // If the location.hash matches one of the links, use that as the active tab. // If no match is found, use the first link as the initial active tab. $active = jQuery($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); $active.addClass('active'); $content = $($active[0].hash); // Hide the remaining content $links.not($active).each(function () { jQuery(this.hash).hide(); }); // Bind the click event handler jQuery(this).on('click', 'a', function(e){ // Make the old tab inactive. $active.removeClass('active'); $content.hide(); // Update the variables with the new link and content $active = jQuery(this); $content = jQuery(this.hash); // Make the tab active. $active.addClass('active'); $content.show(); // Prevent the anchor's default click action e.preventDefault(); }); }); 

试试这个,

  

test

test 1

test 2

现场演示