【发布时间】：2011-02-26 15:01:59
【问题描述】：
我现在能够成功创建动态选项卡，但如何关闭它们？如此处所示，关闭图标向左浮动：
这是我目前使用的代码：
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.seyfertdesign.com/jquery/css/reset-fonts.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.seyfertdesign.com/jquery/css/examples.css" />
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/ui/ui.core.js"></script>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/ui/ui.tabs.js"></script>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/ui/extensions/ui.tabs.paging.js"></script>
4<script type="text/javascript">
$(function($) {
$('#example').tabs();
$('#example').tabs('paging');
var $tabs= $('#example')
.tabs('paging')({
'closable':true, //Default false
});
});
</script>
<script type="text/javascript">
function addTab(selector, index) {
var myTabs = jQuery(selector);
if (index == undefined)
index = myTabs.tabs('length');
tabId = '#tab' + (new Date).getTime();
myTabs.tabs('add', tabId, $('#TAB_NAME').val());
$(tabId).load('new_tab_data.txt');
}
</script>
<style>
html {
overflow-y: scroll !important;
}
.tabs {
background-color: #eee;
border-bottom: 1px solid #ccc;
list-style: none;
margin: 0;
padding: 10px 5px 1px 5px;
zoom:1;
}
.tabs:after {
display: block;
clear: both;
content: " ";
}
.tabs li {
float: left;
margin: 0 1px 0 0;
padding-left: 5px;
}
.tabs a {
display: block;
position: relative;
top: 1px;
border: 1px solid #ccc;
border-bottom: 0;
z-index: 2;
padding: 2px 9px 3px;
color: #444;
text-decoration: none;
white-space: nowrap;
}
.tabs a:focus, .tabs a:active {
outline: none;
}
.tabs a:hover, .tabs a:focus, .tabs a:active {
background: #fff;
cursor: pointer;
}
.ui-tabs-selected a {
background-color: #fff;
color: #000;
font-weight: bold;
padding: 2px 9px 1px;
border-bottom: 1px solid #fff;
border-top: 3px solid #fabd23;
border-left: 1px solid #fabd23;
border-right: 1px solid #fabd23;
margin-bottom: -1px;
overflow: visible;
}
.ui-tabs-hide {
display: none;
background-color: #fff
}
.ui-tabs-panel {
padding: 0.5em;
}
.ui-tabs-paging-next {
float: right !important;
}
.ui-tabs-paging-prev, .ui-tabs-paging-next {
background: transparent !important;
border: 0 !important;
margin-bottom: 1px !important;
}
#example2 .ui-tabs-paging-prev, #example2 .ui-tabs-paging-next {
font-weight: bold;
}
.ui-tabs-paging-prev a, .ui-tabs-paging-next a {
display: block;
position: relative;
top: 1px;
border: 0;
z-index: 2;
padding: 0;
/* color: #444; */
text-decoration: none;
background: transparent !important;
cursor: pointer;
}
.ui-tabs-paging-next a:hover, .ui-tabs-paging-next a:focus, .ui-tabs-paging-next a:active, .ui-tabs-paging-prev a:hover, .ui-tabs-paging-prev a:focus, .ui-tabs-paging-prev a:active {
background: transparent;
}
.ui-tabs-paging-disabled {
visibility: hidden;
}
</style>
</head>
<body>
<input type="text" id="TAB_NAME" value="New Tab" size="10" />
<button onclick="addTab('#example');">Add</button>
<div id="example">
<ul class="tabs">
<li><a href="#tab1">Pretium</a></li>
</ul>
<div id="tab1">
<p>Morbi consequat iaculis quam. Suspendisse pharetra, turpis molestie varius adipiscing, est ligula eleifend lorem, in iaculis lectus nibh ac nibh. Curabitur semper condimentum neque. Praesent at diam ac diam gravida elementum. Mauris aliquet vehicula elit. Donec aliquet velit. Integer lobortis lacus in augue. Cras dignissim. Pellentesque facilisis ultrices orci. Morbi ligula ipsum, rutrum in, convallis eu, accumsan quis, odio. Quisque lorem sapien, dictum vulputate, rhoncus id, facilisis vel, lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec neque magna, elementum id, posuere eget, elementum eu, pede.</p>
<p>Donec non turpis. Quisque cursus adipiscing orci. Sed non lectus. Fusce nec turpis. Etiam tincidunt. Nam tempus, nulla vitae pretium elementum, ante massa rhoncus dolor, nec ultrices felis tellus in dolor. Pellentesque ut justo. Sed ligula. Praesent vel lorem eu est convallis sodales. Nam porta iaculis orci.</p>
</div>
</div>
</body>
</html>
【问题讨论】：
-
这看起来像是在使用 jQueryUI。是这样吗？
-
@Andrew：显示的外部 JS 文件强烈表明是这种情况。
标签： javascript jquery css jquery-ui