|
|
| 第33行： |
第33行： |
| </table> | | </table> |
| </div> | | </div> |
|
| |
| <!-- ========== 纯前端控制脚本 ========== -->
| |
| <script>
| |
| (function() {
| |
| // 使用 IIFE 隔离作用域
| |
| var container = document.querySelector('.ci-wrapper .ci-container');
| |
| if (!container) return;
| |
|
| |
| // 1. 处理图片显示与选项卡
| |
| var tabs = container.querySelectorAll('.ci-tab-btn');
| |
| var items = container.querySelectorAll('.ci-img-item');
| |
| var noImageDiv = container.querySelector('.ci-no-image');
| |
| var hasImage = false;
| |
|
| |
| // 收集有效的图片
| |
| var validItems = [];
| |
| items.forEach(function(item, index) {
| |
| var img = item.querySelector('img');
| |
| var src = img ? img.getAttribute('src') : '';
| |
| // 如果图片链接为空或者只是占位符，视为无效
| |
| if (src && src.trim() !== '') {
| |
| hasImage = true;
| |
| validItems.push(index);
| |
| item.style.display = 'block'; // 暂时显示，后续由 active 控制
| |
| } else {
| |
| item.style.display = 'none';
| |
| if (tabs[index]) tabs[index].style.display = 'none';
| |
| }
| |
| });
| |
|
| |
| // 如果没有有效图片，显示占位，隐藏选项卡容器
| |
| if (!hasImage) {
| |
| if (noImageDiv) noImageDiv.style.display = 'block';
| |
| var tabContainer = container.querySelector('.ci-image-tabs');
| |
| if (tabContainer) tabContainer.style.display = 'none';
| |
| // 隐藏所有图片项
| |
| items.forEach(function(item) { item.style.display = 'none'; });
| |
| } else {
| |
| if (noImageDiv) noImageDiv.style.display = 'none';
| |
| // 默认激活第一个有效图片
| |
| var firstValid = validItems[0];
| |
| if (firstValid !== undefined) {
| |
| // 激活对应的图片和选项卡
| |
| items.forEach(function(item, idx) {
| |
| if (idx === firstValid) {
| |
| item.style.display = 'block';
| |
| item.classList.add('active');
| |
| } else {
| |
| item.style.display = 'none';
| |
| item.classList.remove('active');
| |
| }
| |
| });
| |
| tabs.forEach(function(tab, idx) {
| |
| if (idx === firstValid) {
| |
| tab.classList.add('active');
| |
| } else {
| |
| tab.classList.remove('active');
| |
| }
| |
| });
| |
| }
| |
|
| |
| // 绑定点击切换事件
| |
| tabs.forEach(function(tab) {
| |
| tab.addEventListener('click', function(e) {
| |
| var index = parseInt(this.getAttribute('data-ci-index'), 10);
| |
| if (isNaN(index)) return;
| |
| // 只切换有效的图片
| |
| var targetItem = null;
| |
| items.forEach(function(item) {
| |
| var idx = parseInt(item.getAttribute('data-ci-index'), 10);
| |
| if (idx === index) {
| |
| targetItem = item;
| |
| }
| |
| });
| |
| if (!targetItem || targetItem.style.display === 'none') return;
| |
|
| |
| // 更新选项卡样式
| |
| tabs.forEach(function(t) { t.classList.remove('active'); });
| |
| this.classList.add('active');
| |
|
| |
| // 更新图片显示
| |
| items.forEach(function(item) {
| |
| item.classList.remove('active');
| |
| item.style.display = 'none';
| |
| });
| |
| targetItem.style.display = 'block';
| |
| targetItem.classList.add('active');
| |
| });
| |
| });
| |
| }
| |
|
| |
| // 2. 处理表格空行隐藏
| |
| var rows = container.querySelectorAll('.ci-info-table .ci-row');
| |
| var allEmpty = true;
| |
| rows.forEach(function(row) {
| |
| var valueTd = row.querySelector('.ci-value');
| |
| if (valueTd) {
| |
| var text = valueTd.textContent.trim();
| |
| if (text === '') {
| |
| row.style.display = 'none'; // 空行隐藏
| |
| } else {
| |
| allEmpty = false;
| |
| }
| |
| }
| |
| });
| |
|
| |
| // 如果所有信息都为空，在表格末尾追加一行提示
| |
| if (allEmpty) {
| |
| var table = container.querySelector('.ci-info-table');
| |
| if (table) {
| |
| var tr = document.createElement('tr');
| |
| tr.className = 'ci-empty-row';
| |
| var td = document.createElement('td');
| |
| td.setAttribute('colspan', '2');
| |
| td.textContent = '暂无人物信息';
| |
| td.style.textAlign = 'center';
| |
| td.style.color = '#999';
| |
| td.style.padding = '16px';
| |
| tr.appendChild(td);
| |
| table.appendChild(tr);
| |
| }
| |
| }
| |
| })();
| |
| </script>
| |
| </div> | | </div> |
| </includeonly> | | </includeonly> |
| <noinclude> | | <noinclude> |
粤公网安备44030002015967号