我已经实现了jquery-ui默认选项卡,我的客户端回到我身边,要求在最初登陆页面时存在与标签本身分开的主页消息。所以为了说明......我有五个标签,其中有五个对应的div和相关内容。需要添加将在初始化时显示的另一个div内容,然后一旦选择了一个选项卡,它将消失且无法访问。 li元素都需要一个相应的div才能使用,如果我尝试将额外的li设置为display:none,则jquery初始化会删除它...是否有一个简单的解决方案或者我将不得不编写自定义代码此?
$(document).ready(function () {
$(".tabs").tabs({ event: "mouseover", fx: { opacity: 'toggle', duration: 'fast' }
});
});
加
$(document).ready(function(){
$("#blank").remove();});
HTML 的
<div class="tabs">
<ul>
<li id="blank" class="tabsm"><a href="#keytab-x" style="display: none"></a></li>
<li class="tabsm"><a href="#keytab-1"tab1</a></li>
<li class="tabsm"><a href="#keytab-2">tab2t</a></li>
<li class="tabsm"><a href="#keytab-3">tab3</a></li>
<li class="tabsm"><a href="#keytab-4">tab4</a></li>
<li class="tabsm"><a href="#keytab-5">tab5</a></li>
</ul>}
<div id="keytab-x">
<h2>
this is the default</h2>
<p>
</p>
</div>
<div id="keytab-1">
<h2>
this is tab 1</h2>
<p>
</p>
</div>
<div id="keytab-2">
<h2>
this is the tab 2</h2>
<p>
</p>
</div>
<div id="keytab-3">
<h2>
this is the tab 3</h2>
<p>
</p>
</div>
</div>
etc..
答案 0 :(得分:0)
行,
如上所述使用删除:
$('#tabs').tabs('remove', 2);
或在图标上放置一个图层,在x时间之后或与标签交互时在DOM中删除/隐藏图层。
我这样做了一次广告块,它会叠加标签。
您可以拥有以下结构:
<div id="tabs">
<ul>
<li>
<a href='#tabs1">tab 1</a>
</li>
<li>
<a href='#tabs2">tab 2</a>
</li>
</ul>
<div id="tabs1"> my tab1 content</div>
<div id="tabs2"> my tab2 content </div>
<div id="myOverlay"> my overlay content </div>
</div> <!-- end tabs -->
使用jQuery UI选项卡如何工作,只有具有与ul中的哈希匹配的id的div才会被视为“tabs”的一部分 - 任何其他div都呈现为普通div。所以有了一些css来绝对定位覆盖层和一些jquery来处理隐藏它(当我这样做时,我使用了一个滑动),你将全部设置。