Jquery can'；不要让lightbox在选项卡式内容中工作

我正在尝试从选项卡式内容中使用lightbox插件。它在第一个标签上工作正常，但在其他标签上不起作用。我想不出来。谢谢你的帮助

以下是html css和jquery：

<div class="tabbedPanels" id="tabbed1">

<ul class="tabs">

  <li><a href="#panel1" tabindex="1">Hand Tools</a></li>
  <li><a href="#panel2" tabindex="2">Power Tools</a></li>
  <li><a href="#panel3" tabindex="3">Accessories</a></li>
  <li><a href="#panel4" tabindex="4">Decorating</a></li>
  <li><a href="#panel5" tabindex="5">Safety</a></li>


</ul>

<div class="panelContainer">

<div id="panel1" class="panel">

<h2>Panel 1 content</h2>

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
<p>&nbsp;</p>

<div id="images" class="images">

  <a href="#" title="Click for larger image"><img src="#" alt="some img"></a>
  <a href="#" title="Click for larger image"><img src="#" alt="some img"></a>



</div><!--End of .images-->

</div><!--End of panel 1-->​

<div id="panel2" class="panel">

<h2>Panel 1 content</h2>

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
<p>&nbsp;</p>

<div id="images" class="images">

  <a href="#" title="Click for larger image"><img src="#" alt="some img"></a>
  <a href="#" title="Click for larger image"><img src="#" alt="some img"></a>



</div><!--End of .images-->

</div><!--End of panel 2-->​

</div><!--End of panel container-->

<style type="text/css">

/* Begin tabbed content styles */

.tabbedPanels {

    width: 98%;
    margin-right: auto;
    margin-left: auto;
    display: block;

}

.tabs {

    margin: 0!important;
    padding: 0; 
    zoom : 1;
}

.tabs li {

    float: left;
    list-style: none;
    padding: 0;
    margin: 0 !important;
    font-weight: bold;
}

.tabs a {
    display: block;
    text-decoration: none;
    padding: 3px 5px;
    background-color: #EEE;
    margin-right: 3px;
    border: 1px solid #ccc;
    margin-bottom: -1px;
    color: #999999 !important;
}

.tabs .active {
    border-bottom: 1px solid white;
    background-color: white;
    color: #06F !important;
    position: relative;
    text-decoration: none;
}

.tabs li a:hover, .tabs li a:active {

    text-decoration: none !important;
    background-color: white;
    color: #06F !important;

}

.panelContainer {

    clear: both;
    margin-bottom: 25px;    
    border: 1px solid #CCC; 
    background-color: white;
    padding: 10px;
}

.panel h2 {

    color
}

.panel p {

    color: black;   
}

</style>

<script type="text/javascript">

// Tabbed content script

$(document).ready(function() {
    $('.tabs a').bind('click focus',function() {
        var $this = $(this);

        // hide panels
        $this.parents('.tabbedPanels')
            .find('.panel').hide().end()
            .find('.active').removeClass('active');

        // add active state to new tab
        $this.addClass('active').blur();    

        // retrieve href from link (is id of panel to display)
        var panel = $this.attr('href');
        // show panel
        $(panel).show();
        // don't follow link
        return false;
    }); // end click

    $('.tabs').find('li:first a').click();
}); // end ready



// Lightbox Gallery Script

  $(function() {
        $('#images a').lightBox();

    });


</script>

小组1内容
在非故意的情况下，除了在铜酸盐中的腐败行为外，其他的腐败行为和犯罪行为都会导致暴力行为，同样的罪过也会导致对动物、劳动和精神的伤害

在非故意的情况下，除了在铜酸盐中的腐败行为外，其他的腐败行为和犯罪行为都会导致暴力行为，同样的罪过也会导致对动物、劳动和精神的伤害


​
小组1内容
在非故意的情况下，除了在铜酸盐中的腐败行为外，其他的腐败行为和犯罪行为都会导致暴力行为，同样的罪过也会导致对动物、劳动和精神的伤害

在非故意的情况下，除了在铜酸盐中的腐败行为外，其他的腐败行为和犯罪行为都会导致暴力行为，同样的罪过也会导致对动物、劳动和精神的伤害


​
/*开始选项卡式内容样式*/
.选项卡式面板{
宽度：98%；
右边距：自动；
左边距：自动；
显示：块；
}
.标签{
边距：0！重要；
填充：0；
缩放：1；
}
李先生{
浮动：左；
列表样式：无；
填充：0；
边距：0！重要；
字体大小：粗体；
}
.标签a{
显示：块；
文字装饰：无；
填充物：3px 5px；
背景色：#EEE；
右边距：3倍；
边框：1px实心#ccc；
边缘底部：-1px；
颜色：#999999！重要；
}
.tabs.活动{
边框底部：1px纯白；
背景色：白色；
颜色：#06F！重要；
位置：相对位置；
文字装饰：无；
}
.tabs li a:悬停，.tabs li a:活动{
文字装饰：无！重要；
背景色：白色；
颜色：#06F！重要；
}
.panelContainer{
明确：两者皆有；
边缘底部：25px；
边框：1px实心#CCC；
背景色：白色；
填充：10px；
}
.小组h2{
颜色
}
.p.小组{
颜色：黑色；
}
//选项卡式内容脚本
$（文档）.ready（函数（）{
$（'.tabs a'）.bind（'click focus'，function（）{
var$this=$（this）；
//隐藏面板
$this.parents（“.tabbedPanels”）
.find（'.panel'）.hide（）.end（）
.find（'.active'）.removeClass（'active'）；
//将活动状态添加到新选项卡
$this.addClass（'active'）.blur（）；
//从链接检索href（是要显示的面板的id）
var panel=$this.attr（'href'）；
//显示面板
$（panel.show（）；
//不要跟随链接
返回false；
})；//结束单击
$（'.tabs'）。查找（'li:first a'）。单击（）；
}); // 准备就绪
//灯箱库脚本
$（函数（）{
$（“#图像a”）.lightBox（）；
});

---

我在这里使用这个lightbox插件：

您有两个元素具有相同的ID（#图像）。一个ID应该只出现一次并且是唯一的

快速修复

 $(function() {
        $('.images a').lightBox();

    });

---

是的，灯箱很可能只绑定到一个ID（因为应该只有一个）。将选择器切换到类应该可以解决这个问题。但是测试一下，让我知道。它有效。谢谢你，我真是个笨蛋，因为我没有发现