-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>&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

4

1 回答 1

1

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

快速解决

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

    });
于 2012-10-09T07:40:33.923 回答