Jquery 一页上有多个选项卡div的问题

抱歉如果这个答案已经在这里，我找不到我想要的

基本上，在一个页面的主体，我想有介绍，日历，预订表等选项卡。。。但是，侧边导航已经有了一个选项卡式元素，用于显示与页面主题相关的新闻、事件和文档，仅此页面无法正确显示

我认为这是因为两个tab div之间存在冲突，我尝试在CSS和html中为它们指定了inique ID，但这两个选项似乎都无法解决问题，所以希望这里有人能指出我的错误

正文选项卡的HTML（删除内容以便于在此处查看）：

所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物

这是侧边导航的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>

{exp:channel:entries channel=“news”category=“{embed:related}”orderby=“entry\u date”sort=“DESC”limit=“10”dynamic=“no”}

{如果没有结果}
{相关内容}
{/if}
{/exp:channel:entries}


{exp:channel:entries channel=“document”category=“{embed:related}”orderby=“entry\u date”sort=“DESC”limit=“10”dynamic=“no”}

{如果没有结果}
{相关内容}
{/if}
{/exp:channel:entries}


{exp:channel:entries channel=“links”category=“{embed:related}”orderby=“entry\u date”sort=“DESC”limit=“10”dynamic=“no”}

{如果没有结果}
{相关内容}
{/if}
{/exp:channel:entries}


{exp:channel:entries channel=“events”category=“{embed:related}”orderby=“entry\u date”sort=“DESC”limit=“10”dynamic=“no”}

{如果没有结果}
{相关内容}
{/if}
{/exp:channel:entries}

---

非常感谢您的帮助。

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

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

$（文档）.ready（函数（）{
$（“#制表符”）.tabs（）；
$（“#tabs2”）.tabs（）；
});

不要用相同的ID命名您的DIV！不管你的名字是什么，它们一定是不同的（所有的子项也不一样）。我意识到，我不确定的是我需要更改它的所有地方，必须同时更新CSS和jquery代码，最终设法让它正常工作并显示。无论如何，谢谢没有所有项目（CSS、完整html排序…）不容易帮助

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