Javascript 创建可选的li项作为按钮

我有一个由列表项组成的按钮的用户界面。我想让他们能够单独选择，在那里他们将控制另一个div的颜色。现在我有他们的布局，他们有一个css过渡，他们在规模增长时，悬停在上面，但我想然后保持完全规模时，选择。我该怎么做

我尝试使用focus伪类，但这只适用于输入元素。我还尝试了活动伪类，但我认为我在使用这些类时遗漏了一些东西

最后，如果我希望他们将另一个div的背景色更改为按钮的颜色，我会怎么做

我还没有建立将要生效的元素，我只是想使用一些形状像正方形的div，带有背景色来测试，但我在这一点上被卡住了，无法给出列表项的活动状态。这其中可能有一些JS方面是我遗漏的

这是我的密码： HTML:

然后，我希望在选择时保持完全缩放。我该怎么做

使用CSS类

.scale{transfrom:scale（1.3）}

，JavaScript可以使用

el.classList.add（）

和

el.classList.remove（）

最后，如果我想让他们改变背景颜色，我会怎么做 按钮颜色的另一个div

• 使用

  document.querySelectorAll（）访问所有列表项

• 向每个列表项添加单击事件
• 获得背景色与颜色

总计 （增加了class

.scale

和

）

var colorButtons=document.queryselectoral（“.swatchSelector>li”），
bg=document.getElementById（“bg”），
curr=0；
对于（变量i=0；i
/*重置*/
html，
身体，
ul，
锂，
P
A.
img，
人力资源{
边际：0px；
填充：0px；
边界：0px；
列表样式类型：无；
文字装饰：无；
}
#颜色选择，
#背景{
垂直对齐：顶部；
宽度：320px；
高度：720px；
背景色：#D4；
显示：内联块；
}
.选择器{
边缘底部：20px；
填充：10px；
左边距：4倍；
}
.节头{
字体系列：helvetica、arial、无衬线字体；
字体大小：20px；
颜色：黑色；
边缘底部：7px；
}
斯沃琪先生{
宽度：17px；
高度：17px；
边框：2倍实心；
边界半径：50%；
显示：内联块；
左边距：12px；
文本对齐：居中；
位置：相对位置；
转换：转换：2s轻松输入输出；
盒影：0px 1px 5px rgba（0,0,0,0.5）；
光标：指针；
}
.斯沃琪：悬停，
.天平{
转换：比例（1.3）；
}
.纵横杆{
边框：1px白色固体；
位置：相对位置；
右：0px；
顶部：12px；
盒影：0px 1px 5px rgba（0,0,0,0.25）；
}
.一{
左边距：0px；
背景色：#ffdc01；
边框颜色：白色；
过渡：边界0.01s；
}
第一：悬停，
.1：主动{
边框颜色：#ffdc01；
}
.二{
背景色：#f27245；
边框颜色：白色；
过渡：边界0.01s；
}
.2：悬停，
.2：主动{
边框颜色：#f27245；
}
.三{
背景色：#db3844；
边框颜色：白色；
过渡：边界0.01s；
}
.三：悬停，
.3：主动{
边框颜色：#db3844；
}
.4{
背景色：#754c90；
边框颜色：白色；
过渡：边界0.01s；
}
.四：悬停，
.4：主动{
边框颜色：#754c90；
}
.5{
背景色：#005c9f；
边框颜色：白色；
过渡：边界0.01s；
}
.5：悬停，
.5：主动{
边框颜色：#005c9f；
}
.6{
背景色：#343333；
边框颜色：白色；
过渡：边界0.01s；
}
.6：悬停，
.6：主动{
边框颜色：#343333；
}
.7{
背景色：#6a6c70；
边框颜色：白色；
过渡：边界0.01s；
}
.7：悬停，
.7：主动{
边框颜色：#6a6c70；
}
.8{
背景色：#e9eae8；
边框颜色：白色；
过渡：边界0.01s；
}
.8：悬停，
.8：主动{
边框颜色：#e9eae8；
}

基本颜色











JavaScript可以吗，还是只需要HTML+CSS解决方案？我相信后一种可能是不可能的。我将采用JS解决方案。我只是不知道如何实现它。谢谢，我已经实现了它，它可以工作了。一个后续问题。有没有办法设置默认选项？页面加载时是否已选择其中一种颜色？答案将被编辑。如果要更改默认值，请更改
curr
（从0开始）的值。如果要多次使用它，请使用它生成一个函数。例子：
<div id="colorSelection">
  <div class="base_color selector">
    <p class="sectionHeader">Base Color</p>
    <ul class="swatchSelector">
      <hr class="crossbar" width="90%">
      <li class="swatch one"></li>
      <li class="swatch two"></li>
      <li class="swatch three"></li>
      <li class="swatch four"></li>
      <li class="swatch five"></li>
      <li class="swatch six"></li>
      <li class="swatch seven"></li>
      <li class="swatch eight"></li>
    </ul>
  </div>
</div>

/*reset*/
html, body, ul, li, p, a, img, hr{
  margin: 0px;
  padding: 0px;
  border: 0px;
  list-style-type: none;
  text-decoration: none;
}
#colorSelection {
    width: 320px;
    height: 720px;
    background-color:#d4d4d4;
    display: inline-block;
}
.selector{
    margin-bottom: 20px;
    padding: 10px;
    margin-left: 4px;
}
.sectionHeader {
    font-family: helvetica,arial,sans-serif;
    font-size: 20px;
    color:black;
    margin-bottom: 7px;
}
.swatch {
    width: 17px;
    height: 17px;
    border: 2px solid;
    border-radius: 50%;
    display: inline-block;
    margin-left: 12px;
    text-align: center;
    position: relative;
    transition: transform:2s ease-in-out;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
    cursor: pointer;
}
.swatch:hover{
    transform: scale(1.3);
}

.crossbar{
    border:1px white solid; 
    position: relative;
    right: 0px;
    top: 12px;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.25);  
}

.one{
    margin-left: 0px;
    background-color:#ffdc01;
    border-color:white;
    transition: border .01s;
}
.one:hover, .one:active {
    border-color:#ffdc01;
}
.two{
    background-color:#f27245;
    border-color:white;
    transition: border .01s;
}
.two:hover, .two:active {
    border-color:#f27245;
}
.three {
    background-color:#db3844;
    border-color:white;
    transition: border .01s;
}
.three:hover, .three:active {
    border-color:#db3844;
}
.four {
    background-color:#754c90;
    border-color:white;
    transition: border .01s;
}
.four:hover, .four:active {
    border-color:#754c90;
}
.five{
    background-color:#005c9f;
    border-color:white;
    transition: border .01s;
}
.five:hover, .five:active {
    border-color:#005c9f;
}
.six{
    background-color:#343333;
    border-color:white;
    transition: border .01s;
}
.six:hover, .six:active {
    border-color:#343333;
}
.seven {
    background-color:#6a6c70;
    border-color:white;
    transition: border .01s;
}
.seven:hover, .seven:active {
    border-color:#6a6c70;
}
.eight {
    background-color:#e9eae8;
    border-color:white;
    transition: border .01s;
}

.eight:hover, .eight:active {
    border-color:#e9eae8;
}