JQuery: Fancybox在选项卡中打开图像- ASP.Net

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
  </ul>
  
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <a class="fancybox" href="path/to/image1.jpg"><img src="path/to/thumbnail1.jpg" alt="Image 1"></a>
    </div>
    <div id="tab2" class="tab">
      <a class="fancybox" href="path/to/image2.jpg"><img src="path/to/thumbnail2.jpg" alt="Image 2"></a>
    </div>
  </div>
</div>

$(document).ready(function() {
  $('.tab-links a').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');
    
    // 显示/隐藏选项卡内容
    $('.tab').removeClass('active');
    $(currentAttrValue).addClass('active');
    
    // 初始化Fancybox
    $('.fancybox').fancybox();
    
    e.preventDefault();
  });
});

.tabs {
  /* 样式定义 */
}

.tab-links {
  /* 样式定义 */
}

.tab-content {
  /* 样式定义 */
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

.fancybox {
  /* 样式定义 */
}