我正在使用twitter bootstrap。我有一个菜单，我想在用户点击菜单时添加动态标签。新标签页将加载另一个页面，但我不想使用iframe加载页面。
你们有什么解决办法吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../ico/favicon.ico">
<title>Theme Template for Bootstrap</title>
<script src="css_link.js"></script>
<style type="text/css">
.tabs-header{
border-style: none;
}
.tabs-panels {
margin: 0px;
padding: 0px;
border-width: 0px 1px 1px;
border-style: none;
overflow: hidden;
}
.easyui-tabs{
width: auto;
height: auto;
}
.tabs-container{
width: auto;
height: auto;
}
.panel-body .panel-body-noheader .panel-body-noborder iframe{
height: 100%;
}
</style>
<script>
function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:560px;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
</script>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body role="document">
<script src="header.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-md-3 col-xs-5 sidebar">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab"><span class="glyphicon glyphicon-envelope" style="font-size: 25px;"></span></a></li>
<li class=""><a href="#profile" data-toggle="tab"><span class="glyphicon glyphicon-envelope" style="font-size: 25px;"></a></li>
<li class=""><a href="#profile" data-toggle="tab"><span class="glyphicon glyphicon-envelope" style="font-size: 25px;"></a></li>
<li class=""><a href="#profile" data-toggle="tab"><span class="glyphicon glyphicon-envelope" style="font-size: 25px;"></a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<div class="container">
<!-- treeeeeeeeeeeee -->
<!-- <div class="col-md-3"> -->
<!-- <div class="well col-md-2"> -->
<ul class="nav nav-list">
<li><label class="tree-toggler nav-header"><b class="caret"></b> Product</label>
<ul class="nav nav-list tree">
<li><a href="#" onclick="addTab('Catagory', 'catagory.html')">Catagory</a></li>
<li><a href="#" onclick="addTab('Software', 'software.html')">Software</a></li>
</ul>
</li>
<li class="nav-divider col-lg-2 col-md-2 col-sm-3 col-xs-4"></li><br>
<li><label class="tree-toggler nav-header"><b class="caret"></b> Header 2</label>
<ul class="nav nav-list tree">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><label class="tree-toggler nav-header">Header 2.1</label>
<ul class="nav nav-list tree">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><label class="tree-toggler nav-header">Header 2.1.1</label>
<ul class="nav nav-list tree">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</li>
<li><label class="tree-toggler nav-header">Header 2.2</label>
<ul class="nav nav-list tree">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><label class="tree-toggler nav-header">Header 2.2.1</label>
<ul class="nav nav-list tree">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- </div> -->
<!-- </div> -->
</div>
<!-- treeeeeeeeeee -->
</div>
<div class="tab-pane fade" id="profile">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
</div>
</div>
</div>
<!-- main page -->
<div class="col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-offset-3 col-xs-offset-5">
<div id="tt" class="easyui-tabs">
<div title="Deshboard">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- main container -->
<!-- main container -->
<script src="footer.js"></script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../docs.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$('label.tree-toggler').click(function () {
$(this).parent().children('ul.tree').toggle(300);
});
</script>
</body>
</html>
答案 0 :(得分：1)
请参阅http://www.jeasyui.com/documentation/index.php
$('#tt').tabs('add',{
title:title,
//content:content,
href: url, // remote url with content
closable:true
});
此外，可以使用 jQuery.load（）（https://api.jquery.com/load/）或 jQuery.get（）（http://api.jquery.com/jQuery.get/）等AJAX函数