在编辑模板的时候

给内容页多个播放列表

搞了个选项

代码如下

CSS

        /* 内容元素初始隐藏 */
       .content {
            display: none;
        }
        /* 点击后的链接样式 */
        a.clicked {
            color: red;
            font-weight: bold;
        }

HTML代码

<div class="center wrap">
   <div class="center_left"><h2>播放列表</h2></div>
   <div class="center_right">
     {playpage:playlist}
        <a href="#playlist[playlist:i]" onclick="showContent('content[playlist:i]')">[playlist:from]</a>
     {/playpage:playlist}
   </div>
</div>

{playpage:playlist}
<ul id="content[playlist:i]" class="content">[playlist:link target=_self]</ul>
{/playpage:playlist}

JS代码

  window.onload = function () {
    // 从本地存储中读取之前保存的显示内容id
    var savedId = localStorage.getItem('activeContentId');
    if (savedId) {
      document.getElementById(savedId).style.display = 'block';
    } else {
      document.getElementById('content1').style.display = 'block';
    }
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
      links[i].classList.remove('clicked');
    }
  }
  function showContent(id) {
    var contents = document.getElementsByClassName('content');
    for (var i = 0; i < contents.length; i++) {
      contents[i].style.display = 'none';
    }
    document.getElementById(id).style.display = 'block';
    // 将当前显示的内容id保存到本地存储
    localStorage.setItem('activeContentId', id);
  }

效果是有了 但就是每次打开页面  

播放列表显示加载时间太慢了

页面其他的加载完成后  播放列表才显示

以上代码是用AI助手生成修改的

本来想扣默认模版的代码  但是看不太懂！

还望大神们帮我修改下！