从一个链接显示两个具有相同 ID 的 div 的内容答案

【问题标题】：Show contents of two divs with the same ID from one link从一个链接显示两个具有相同 ID 的 div 的内容
【发布时间】：2014-01-31 16:08:15
【问题描述】：

我有一个使用 jQuery 选项卡的网站。我有一个带有基本描述的侧边栏。下面是一张图片，下面是一个用于导航到选项卡的列表。

我有它，如果你点击一个链接，比如选项卡 2，边栏中的图像会改变以匹配选项卡 2 的内容，依此类推。

这工作了大约一个月，突然我回到了这个项目，它不再支持调用两个 ID。我知道使用两个 ID 是不正确的，但它确实有效。

想知道是否有人可以提供一些启示。

<div id="container">
    <div id="tabs">
        <div class="sidebar">
            <p>Basic description</p>
            <div id="p1"><img src="product1.jpg"/></div>
            <div id="p1"><img src="product2.jpg"/></div>
            <div id="p1"><img src="product3.jpg"/></div>
            <ul>
                <li><a href="#p1"><h5>Product 1</h5></a></li>
                <li><a href="#p2"><h5>Product 2</h5></a></li>
                <li><a href="#p3"><h5>Product 3</h5></a></li>
            </ul>
        </div><!--close sidebar-->

        <div class="content">
            <div id="p1">
                <p>Product 1 info</p>
            </div> <!-- close p1 -->
            <div id="p2">
                <p>Product 2 info</p>
            </div> <!-- close p2 -->
           <div id="p3">
                <p>Product 3 info</p>
            </div> <!-- close p3 -->
        </div><!-- close content -->
    </div><!-- close tabs -->
</div><!-- close container -->

【问题讨论】：

您不会发现很多人愿意无缘无故地帮助您使用故意错误的标记。它可能以某种方式工作，但它必然会在某个浏览器或另一个浏览器中中断。修复您的 ID 并修改您的代码以正常工作。

标签： jquery jquery-ui user-interface tabs

【解决方案1】：

这是执行此操作的正确方法。您将使用 jQueryUI 的内置回调功能。

http://jsfiddle.net/isherwood/73B4f

<style>
.sidebar-img {
    display: none;
}
</style>

<div id="container">
    <div id="tabs">
        <div class="sidebar">
            <p>Basic description</p>
            <div class="sidebar-img" style="display: block;">Image 1</div>
            <div class="sidebar-img">Image 2</div>
            <div class="sidebar-img">Image 3</div>

            ...
        </div><!-- close content -->
    </div><!-- close tabs -->
</div><!-- close container -->

<script>
$('#tabs').tabs({
    activate: function (event, ui) {
        $('.sidebar-img').hide();
        $('.sidebar-img').eq( ui.newTab.index() ).show();
    }
});
</script>

http://api.jqueryui.com/tabs/#event-activate

【讨论】：