無法讓lightbox在選項卡式內容中工作

Question

我想從選項卡式內容中使用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> 

我在這裏使用這個燈箱插件：Jquery lightbox

Answer 1

你有2個元素具有相同的ID（#Images）。一個ID應該只出現一次並且是唯一的。

快速修復

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

    });