无法使灯箱在标签内容中工作

Question

我正在尝试使用标签内容中的灯箱插件。它在第一个标签上工作正常但在其余部分没有。无法弄清楚。任何帮助表示感谢。

这是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>

我在这里使用这个灯箱插件：Jquery lightbox

Answer 1

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

快速修复

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

    });