我正在使用Jquery UI。我有一個手風琴菜單，每個手風琴菜單都有多個超鏈接。Jquery UI手風琴打開一個新創建的選項卡（簡單操作）
我想要做的是，當我點擊這些超鏈接之一，我想打開我打來的網頁，這是要顯示在一個新的選項卡，可以用x關閉（如這些簡單的操作），但在一個新的標籤顯示。
我的目標是可以通過在手風琴中選擇differet超鏈接選項打開已啓動的多選項卡，以便用戶在需要時關閉它們。
我還沒有發現任何關於如何做到這一點。
有人可以請幫忙。
謝謝
嗨，我想我已經搞定了。感謝您回覆@johnrobinson
我用按鈕做了這個，但會做我所需要的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.callapse.js"></script>
<meta charset="utf-8">
<style>
#dialog label, #dialog input { display:block; }
#dialog label { margin-top: 0.5em; }
#dialog input, #dialog textarea { width: 95%; }
#tabs { margin-top: 1em; }
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#add_tab { cursor: pointer; }
</style>
<script>
$(function() {
var $tab_title_input = $("#tab_title"),
$tab_content_input = $("#tab_content");
var tab_counter = 2;
// tabs init with a custom tab template and an "add" callback filling in the content
var $tabs = $("#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function(event, ui) {
var tab_content = "andyContent" || "Tab " + tab_counter + " content.";
$(ui.panel).append("<p>" + tab_content + "</p>");
}
});
// modal dialog init: custom buttons and a "close" callback reseting the form inside
var $dialog = $("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function() {
addTab();
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
},
open: function() {
$tab_title_input.focus();
},
close: function() {
$form[ 0 ].reset();
}
});
// actual addTab function: adds new tab using the title input from the form above
function addTab() {
var tab_title = "andytitle" || "Tab " + tab_counter;
$tabs.tabs("add", "#tabs-" + tab_counter, tab_title);
tab_counter++;
}
// addTab button: just opens the dialog
$("#add_tab")
.button()
.click(function() {
addTab();
});
// close icon: removing the tab on click
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
$("#tabs span.ui-icon-close").live("click", function() {
var index = $("li", $tabs).index($(this).parent());
if(index != 0){
$tabs.tabs("remove", index);
}
});
});
</script>
</head>
<body>
<div class="demo">
<button id="add_tab">Add Tab</button>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a> </li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
</div>
</body>
</html>
</div>
你的代碼的一個例子會很好，所以我們可以提供幫助。 – JROB