JavaScript来创建标签

-2

!function($) { 

    function add_tab(num, name){ 

     var $newDiv = $("<div class='tab-pane' />") 
        .attr("id", "tab_"+name) 
        .html("Content " + name); 
        //.html("<div class='row'>"); 

     $("#graphTabsContent").append($newDiv); 

     var $newLi = $("<li/>"); 
     if(num==0){ 
      $newLi.attr("class", "active"); 
     } 
     var $newA = $("<a data-toggle='tab' />") 
        .attr("href", "#tab_"+name) 
        .html(name); 
     $newLi.append($newA); 
     $("#ul_tabs").append($newLi);   
    }; 


    function update_graph_tabs(){ 
     $.getJSON("call/json/get_role", {}, function(roles) { 
      $("#ul_tabs").empty(); 
      $("#graphTabsContent").empty(); 

      $.each(roles, function (key, role){ 
       add_tab(key, role); 
      }); 

     });   

    } 

// Run 
    update_graph_tabs(); 

}(jQuery);

此功能从JSON获取数据，并在其后创造标签tabbable，在我的HTML像这样（http://getbootstrap.com/2.3.2/components.html#navs）。这是我的HTML代码：

<div class="row"> 
    <div class="span3"> 
    <div class="dropdown"> 
     <select class="selectpicker btn-warning" id="groupe" data-style="btn-primary"> 
     <option value="">Awaiting data...</option> 
     </select> 
    </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="span4"><div id="reportingContainer"></div></div> 
    <div class="span8"> 
     <div id="dashboard"> 
     <div id="combochart"></div> 
     <div id="control"></div> 
     </div> 
    </div> 
</div> 

<div class="tabbable" > 
    <ul id="ul_tabs" class="nav nav-tabs"> 
    </ul> 
    <div class="tab-content" id="graphTabsContent"> 
    </div> 
</div>

现在，我想在每一个标签中，给我一个图表，我的代码。例如，在我的HTML中，有这个代码可以在我的页面中创建一个饼图和一个combochart，但它不在我的选项卡中。

来源

2013-08-29 user2682470

嗨，欢迎堆栈溢出。你有没有试图解决这个问题呢？如果是这样，如果你能提供你迄今为止所做的事情，那将是一件好事，因为它有助于表明你已经努力解决了你的问题，并帮助其他人看到你出错的地方，并改善你的工作。码。如果你想看看如何编写更好的问题，[帮助中心]（http://stackoverflow.com/help/how-to-ask）是一个很好的开始。你可以在[About]页面找到更多关于Stack Overflow的信息。祝你好运！ –

-1

这可能会帮助您：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title> 
<meta name="description" content="Twitter Bootstrap Basic Tab Based Navigation Example"> 
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet"> 
</head> 
<body> 
<div class="container"> 
<div class="row"> 
<div class="span6"> 
<ul class="nav nav-tabs"> 
<li class="active"> 
<a href="#">Home</a> </li> 
<li><a href="#">Tutorials</a></li> 
<li><a href="#">Practice Editor </a></li> 
<li><a href="#">Gallery</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div> 
</div> 
</div> 
</body> 
</html> 
- See more at: http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php#sthash.a9cP7aDC.dpuf

来源：W3Resource

来源

2013-08-29 12:49:15 AmirtharajCVijay

JavaScript来创建标签

回答

相关问题