Question

道歉，如果这个答案已经在这里，我无法找到我想要的东西。

基本上，在页面的主体内我想要有简介，日历，预订表格等...这些都显示正常，但是，侧面导航已经有一个标签元素用于新闻，事件，文件相关到页面的主题，并且仅在此页面上，这不能正确显示。

我认为这是因为两个标签div之间存在冲突，并且我已尝试在CSS和html中给出它们inique ID，但似乎都没有解决问题，所以希望有人可以指出我的错误。< / p>

正文标签的HTML（删除内容以便于在此处查看）：

<div id="tabs">
<ul class="tabs clearfix">
    <li>
        <a href="#tabs-1">Introduction</a></li>
    <li>
        <a href="#tabs-2">Fields</a></li>
    <li>
        <a href="#tabs-3">Availability</a></li>
    <li>
        <a href="#tabs-4">Rates</a></li>
    <li>
        <a href="#tabs-5">Ts &amp; Cs</a></li>
    <li>
        <a href="#tabs-6">Bookings</a></li>
</ul>
<div id="tabs-1">
content
</div>
<div id="tabs-2">
    content
</div>
<div id="tabs-3">
    content
</div>
<div id="tabs-4">
    content
</div>
<div id="tabs-5">
    content
</div>
<div id="tabs-6">
    content</div>

这是侧面导航的HTML：

<div id="tabs">

                        <ul class="tabs clearfix">
                            <li class="tabs-1"><a href="#tabs-1" title="News">News</a></li>
                            <li class="tabs-2"><a href="#tabs-2" title="Documents">Documents</a></li>
                            <li class="tabs-3"><a href="#tabs-3" title="Links">Links</a></li>
                            <li class="tabs-4"><a href="#tabs-4" title="Events">Events</a></li>
                        </ul>
                        <div class="block tabs_holder">

                            <div id="tabs-1">
                                <ul class="listing">
                                    {exp:channel:entries channel="news" category="{embed:related}" orderby="entry_date" sort="DESC" limit="10" dynamic="no"}
                                        <li><a href="/news/view/{url_title}">{title}</a></li>
                                        {if no_results}
                                            <li>{related_no_content}</li>
                                        {/if}
                                    {/exp:channel:entries}
                                </ul>
                            </div>
                            <div id="tabs-2">
                                <ul class="listing">
                                    {exp:channel:entries channel="document" category="{embed:related}" orderby="entry_date" sort="DESC" limit="10" dynamic="no"}
                                        <li><a href="/document/{url_title}">{title}</a></li>
                                        {if no_results}
                                            <li>{related_no_content}</li>
                                        {/if}
                                    {/exp:channel:entries}
                                </ul>
                            </div>
                            <div id="tabs-3">
                                <ul class="listing">
                                {exp:channel:entries channel="links" category="{embed:related}" orderby="entry_date" sort="DESC" limit="10" dynamic="no"}
                                    <li><a href="{link_url}" {if "{link_target}"=="y"}target="_blank"{/if}>{title}</a></li>
                                    {if no_results}
                                        <li>{related_no_content}</li>
                                    {/if}
                                {/exp:channel:entries}
                                </ul>
                            </div>
                            <div id="tabs-4">
                                <ul class="listing">
                                {exp:channel:entries channel="events" category="{embed:related}" orderby="entry_date" sort="DESC" limit="10" dynamic="no"}
                                    <li><a href="/events/view/{url_title}">{title}</a></li>
                                    {if no_results}
                                        <li>{related_no_content}</li>
                                    {/if}
                                {/exp:channel:entries}
                                </ul>
                            </div>
                        </div><!--/tabs_holder-->
                    </div>

非常感谢您的帮助。

Answer 1

您应该告诉页面脚本有关选项卡的信息。假设您有2个选项卡集，当然，ID必须不同，请在脚本标记内声明：

<script>
    $(document).ready(function () {
            $("#tabs").tabs();
            $("#tabs2").tabs();
    });
</script>

在一个页面上出现多个制表符div

1 个答案: