Javascript 单击后如何更改内容

我正在做调色板板项目，在转换到不同的主题时很挣扎

初始页面将有一个温暖的调色板，但我想改变后，点击所有主题这一点

如果您使用tabwarm下拉菜单，您可以选择不同的选项

下面你会看到我想象的图像

*{
框大小：边框框；
}
身体{
保证金：0；
颜色：#FFF；
}
.董事会{
字母间距：1px；
}
.车载导航指示器{
位置：绝对位置；
排名：0；
左：0；
宽度：75px；
高度：75px；
/*背景色：红色*/
背景图像：-webkit线性渐变（左上，#FF512F，#DD2476）；
背景图像：-moz线性渐变（左上，#FF512F，#DD2476）；
背景图像：-ms线性渐变（右下角，#FF512F，#DD2476）；
背景图像：-o-线性梯度（右下角，#FF512F，#DD2476）；
背景图像：线性渐变（右下角，#FF512F，#DD2476）；
过渡：均为0.3秒；
变换：translateX（0）；
z指数：1；
}
[数据页='0']板导航指示器{
变换：translateX（0）；
}
[数据页='1']板导航指示器{
转化：translateX（100%）；
}
[数据页='2']板导航指示器{
转化：translateX（200%）；
}
.板导航按钮{
显示器：flex；
对齐项目：居中；
位置：相对位置；
z指数：2；
}
.板页{
位置：绝对位置；
顶部：75px；
左：0；
宽度：100%；
高度：计算（100%-75px）；
溢出：隐藏；
}
.板页{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
过渡：全部为0.4s；
变换：translateX（0）；
溢出：自动；
背景色：#262931；
}
.网格行主题.网格项主题{
最大宽度：130像素；
}
#左对齐{
浮动：左；
颜色：#7474；
}
#右对齐{
浮动：对；
颜色：#9CC8E3；
}
.表格项目{
弹性：01.25%；
填充：6px；
}
.表格项目主题{
弹性：01.25%；
填充：6px；
}
.网格行{
溢出-x：自动；
空白：nowrap；
}
.网格行.网格项{
显示：内联块；
最大宽度：110px；
}
.表格项目内容{
文本对齐：左对齐；
字体系列：“艾夫斯先生现代”；
字体大小：0.3rem；
文本转换：大写；
}
.选择调色板img{
边框：3px实心#FFF；
}
#下拉菜单{
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
利润率：2%06%0；
字体大小：0.9rem；
字母间距：1px；
}
/*模态（背景）*/
.模态内部{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.5）；/*黑色w/不透明度*/
}
/*模态内容/框*/
.模态内容主题{
背景色：#fff；
保证金：10%自动；/*15%从顶部和居中*/
填充：20px；
边界半径：4px4px4px4px；
宽度：70%；
高度：430px；
}
/*关闭按钮*/
.结束主题{
颜色：#000000；
背景色：rgba（0,0,0,0.5）；/*黑色w/不透明度*/
字号：28px；
字体大小：粗体；
}
.关闭主题：悬停，
.结束主题：聚焦{
颜色：黑色；
文字装饰：无；
光标：指针；
}
.主题列表下拉列表{
颜色：#BDBEC1；
文本转换：大写；
字体系列：“艾夫斯先生现代”；
字体大小：0.9rem；
文本对齐：居中；
}
.主题列表名称{
填充物：20.5px；
}
#所有主题列表名称{
页边顶部：-5px；
}
#温暖主题列表名称{
颜色：#262931；
/*背景色：#EEEEE F*/
}

Omnibag项目
加热板箭头向下
&时代；
全部的
明亮的
黑暗的
温暖的
酷
淡的
霓虹的
趋向
见识
米色
骆驼
三文鱼粉
那瓦霍白
尼亚加拉
报春花
青金石蓝
新增
见识
淡蓝色
苔藓绿
甜瓜
雪纺绸
孤岛
山茱萸
绿色植物
所有暖色
见识
象牙
蜜露
薰衣草
金丝雀
榛子
甘蓝
鲨鱼皮