タブ付きコンテンツ内からライトボックス プラグインを使用しようとしています。タブ 1 では正常に機能しますが、残りのタブでは機能しません。それを理解することはできません。助けていただければ幸いです。
ここに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> </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> </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