带有非选定默认选项卡的Jquery选项卡

时间:2012-09-28 01:51:27

标签: jquery jquery-ui-tabs

我已经实现了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..

1 个答案:

答案 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来处理隐藏它(当我这样做时,我使用了一个滑动),你将全部设置。