Javascript 用jQuery替换单击两个选项卡时的UL内容？

因此，我有两个选项卡，一个名为Default，另一个名为Dim，正如您所见，我有

sample

var，其中包含用户单击Dim时需要显示的内容，但如何替换用户单击返回Default选项卡时最初加载的内容？如何保持该状态，以便再次使用

.replaceWith（）

？谢谢

var sample = `<ul class="WAC-LIGHTING-FEATURE-LIST id="dim-feature-list">
                        <li>Delivered Lumens: 980lm</li>
                        <li>Construction: Die-cast aluminum trim</li>
                        <li>Adjustable LED light engine included with housing: Vertical Adjustment 0-30°, Horizontal Adjustment 365°</li>
                        <li>Spot, Narrow Flood, and Flood optics included with housing</li>
                        <li>2700K, 3000K, 3500K, or 4000K CRI 90 Color Temperature options available with housing LED light engine</li>
                        <li>Refer to specification sheet for lumens and CBCP data</li>
                        <li> 50/60Hz</li>
                    </ul>`;


$('#dim').click(function() {
    $('#default-wac-feature-list').replaceWith(sample);
    $(this).addClass("tab-active");
if ($(this).attr("class", "tab-active")) {
        $("#default-wac-feature-list").hide();
} else {
}
});

var-sample=`

replaceWith（）
？？我认为
.html（）
会更容易。。请参见下一个示例

使用
.hasClass（）
检查类，而不是使用
.attr（'class'）…



var sample=`

输出流明：980lm
结构：压铸铝饰件
可调LED灯发动机包括外壳：垂直调整0-30°，水平调整365°
包括外壳在内的聚光灯、窄泛光灯和泛光灯
2700K、3000K、3500K或4000K CRI 90色温选项可用于LED灯引擎外壳
有关流明和CBCP数据，请参阅规格表
50/60Hz
`；
变量初始值=“”；
$（'#dim'）。单击（函数（）{
var$this=$（this）；
if（！$this.hasClass（'tab-active'））{
初始值=$（“#默认wac功能列表”）.html（）；
$（'#默认wac功能列表'）.html（示例）；
$（'.tab-active'）.removeClass（'tab-active'）；
$this.addClass（'tab-active'）；
}
});
$（'#默认值'）。单击（函数（）{
var$this=$（this）；
if（！$this.hasClass（'tab-active'））{
$（'#默认wac功能列表'）.html（初始值）；
$（'.tab-active'）.removeClass（'tab-active'）；
$this.addClass（'tab-active'）；
}
})；
.tab处于活动状态{
背景:#555；
颜色：#fff；
}

违约
暗淡的
默认文本
看起来不错，但当我两次单击“Dim”按钮时，它会停止工作？？？@rec0nstr答案已更新..问题出在
选项卡活动
类中，您需要将其从其他选项卡中删除，然后将其添加到单击的选项卡中