选定的li背后的背景颜色

时间：2017-06-01 16:15:39

标签： javascript html css

我有以下代码，我正在创建一个a-z索引。是否可以这样做，只要用户点击一个字母，悬停的背景颜色就会留在所选字母后面，这样就会显示他们选择的字母。任何事都有帮助，欢呼。

function letterChange() {
  var panelId = 'panel' + this.innerText;
  var panels = document.querySelectorAll('.js-div');
  [].forEach.call(panels, function(e) {
    if (e.id == panelId)
       e.style.display = "block";
    else
       e.style.display = "none";
  });     
}

// Add click event listener
var lis = document.querySelectorAll('.flip');
[].forEach.call(lis, function(e) {
  e.addEventListener("click", letterChange);
});
.alphabet {
list-style-type: none;
    margin:0px auto 0;
    padding:0;
    cursor: pointer;
    width:100%;
    text-align:center;
}

.alphabet li {
float:left;
    margin:0;
    padding:0;
    border-right:1px solid darkgrey;
    font-size: 13px;
    font-family:Verdana;
    -moz-box-sizing:border-box;
    color:black;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:3.84%;
}

.alphabet li:last-child {
  border-right: none;
}

.alphabet li:hover {
  color: #005bab;
  background-color: #e2ecf6;
}

.bottombar1{
       content: "";
       display:block;
       height:0.7em;
       width:100%;
       background-color:#00688B;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ {
  display: none;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ {
    display: none;
    font-size: 16px;
    text-align: center;
    background-color:#e2ecf6;
    border-style:solid;
    border-width:1px;
    padding-top:5px;
    padding-bottom:5px;
    border-color:transparent;
    color: #005bab;
    margin: auto;
}
<div>
  <ul class="alphabet">
    <li class="flip">A</li>
    <li class="flip">B</li>
    <li class="flip">C</li>
    <li class="flip">D</li>
    <li class="flip">E</li>
    <li class="flip">F</li>
    <li class="flip">G</li>
    <li class="flip">H</li>
    <li class="flip">I</li>
    <li class="flip">J</li>
    <li class="flip">K</li>
    <li class="flip">L</li>
    <li class="flip">M</li>
    <li class="flip">N</li>
    <li class="flip">O</li>
    <li class="flip">P</li>
    <li class="flip">Q</li>
    <li class="flip">R</li>
    <li class="flip">S</li>
    <li class="flip">T</li>
    <li class="flip">U</li>
    <li class="flip">V</li>
    <li class="flip">W</li>
    <li class="flip">X</li>
    <li class="flip">Y</li>
    <li class="flip">Z</li>
  </ul>
</div>
<br style="line-height:25px;"/>
<div id="panelA" class="js-div">
  <p>A</p>
</div>
<div id="panelB" class="js-div">
  <p>B</p>
</div>
<div id="panelC" class="js-div">
  <p>C</p>
</div>
<div id="panelD" class="js-div">
  <p>D</p>
</div>
<div id="panelE" class="js-div">
  <p>E</p>
</div>
<div id="panelF" class="js-div">
  <p>F</p>
</div>
<div id="panelG" class="js-div">
  <p>G</p>
</div>
<div id="panelH" class="js-div">
  <p>H</p>
</div>
<div id="panelI" class="js-div">
  <p>I</p>
</div>
<div id="panelJ" class="js-div">
  <p>J</p>
</div>
<div id="panelK" class="js-div">
  <p>K</p>
</div>
<div id="panelL" class="js-div">
  <p>L</p>
</div>
<div id="panelM" class="js-div">
  <p>M</p>
</div>
<div id="panelN" class="js-div">
  <p>N</p>
</div>
<div id="panelO" class="js-div">
  <p>O</p>
</div>
<div id="panelP" class="js-div">
  <p>P</p>
</div>
<div id="panelQ" class="js-div">
  <p>Q</p>
</div>
<div id="panelR" class="js-div">
  <p>R</p>
</div>
<div id="panelS" class="js-div">
  <p>S</p>
</div>
<div id="panelT" class="js-div">
  <p>T</p>
</div>
<div id="panelU" class="js-div">
  <p>U</p>
</div>
<div id="panelV" class="js-div">
  <p>V</p>
</div>
<div id="panelW" class="js-div">
  <p>W</p>
</div>
<div id="panelX" class="js-div">
  <p>X</p>
</div>
<div id="panelY" class="js-div">
  <p>Y</p>
</div>
<div id="panelZ" class="js-div">
  <p>Z</p>
</div>
<div class="bottombar1"></div>

2 个答案:

答案 0 :(得分：0)

您只需向tabindex添加li属性，然后在您的CSS中设置:focus规则。

function letterChange() {
  var panelId = 'panel' + this.innerText;
  var panels = document.querySelectorAll('.js-div');
  [].forEach.call(panels, function(e) {
    if (e.id == panelId)
       e.style.display = "block";
    else
       e.style.display = "none";
  });     
}

// Add click event listener
var lis = document.querySelectorAll('.flip');
[].forEach.call(lis, function(e) {
  e.addEventListener("click", letterChange);
});
.alphabet {
list-style-type: none;
    margin:0px auto 0;
    padding:0;
    cursor: pointer;
    width:100%;
    text-align:center;
}

.alphabet li {
float:left;
    margin:0;
    padding:0;
    border-right:1px solid darkgrey;
    font-size: 13px;
    font-family:Verdana;
    -moz-box-sizing:border-box;
    color:black;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:3.84%;
}

.alphabet li:last-child {
  border-right: none;
}

.alphabet li:hover,
.alphabet li:focus {
  color: #005bab;
  background-color: #e2ecf6;
}

.bottombar1{
       content: "";
       display:block;
       height:0.7em;
       width:100%;
       background-color:#00688B;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ {
  display: none;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ {
    display: none;
    font-size: 16px;
    text-align: center;
    background-color:#e2ecf6;
    border-style:solid;
    border-width:1px;
    padding-top:5px;
    padding-bottom:5px;
    border-color:transparent;
    color: #005bab;
    margin: auto;
}
<div>
  <ul class="alphabet">
    <li tabindex="-1" class="flip">A</li>
    <li tabindex="-1" class="flip">B</li>
    <li tabindex="-1" class="flip">C</li>
    <li tabindex="-1" class="flip">D</li>
    <li tabindex="-1" class="flip">E</li>
    <li tabindex="-1" class="flip">F</li>
    <li tabindex="-1" class="flip">G</li>
    <li tabindex="-1" class="flip">H</li>
    <li tabindex="-1" class="flip">I</li>
    <li tabindex="-1" class="flip">J</li>
    <li tabindex="-1" class="flip">K</li>
    <li tabindex="-1" class="flip">L</li>
    <li tabindex="-1" class="flip">M</li>
    <li tabindex="-1" class="flip">N</li>
    <li tabindex="-1" class="flip">O</li>
    <li tabindex="-1" class="flip">P</li>
    <li tabindex="-1" class="flip">Q</li>
    <li tabindex="-1" class="flip">R</li>
    <li tabindex="-1" class="flip">S</li>
    <li tabindex="-1" class="flip">T</li>
    <li tabindex="-1" class="flip">U</li>
    <li tabindex="-1" class="flip">V</li>
    <li tabindex="-1" class="flip">W</li>
    <li tabindex="-1" class="flip">X</li>
    <li tabindex="-1" class="flip">Y</li>
    <li tabindex="-1" class="flip">Z</li>
  </ul>
</div>
<br style="line-height:25px;"/>
<div id="panelA" class="js-div">
  <p>A</p>
</div>
<div id="panelB" class="js-div">
  <p>B</p>
</div>
<div id="panelC" class="js-div">
  <p>C</p>
</div>
<div id="panelD" class="js-div">
  <p>D</p>
</div>
<div id="panelE" class="js-div">
  <p>E</p>
</div>
<div id="panelF" class="js-div">
  <p>F</p>
</div>
<div id="panelG" class="js-div">
  <p>G</p>
</div>
<div id="panelH" class="js-div">
  <p>H</p>
</div>
<div id="panelI" class="js-div">
  <p>I</p>
</div>
<div id="panelJ" class="js-div">
  <p>J</p>
</div>
<div id="panelK" class="js-div">
  <p>K</p>
</div>
<div id="panelL" class="js-div">
  <p>L</p>
</div>
<div id="panelM" class="js-div">
  <p>M</p>
</div>
<div id="panelN" class="js-div">
  <p>N</p>
</div>
<div id="panelO" class="js-div">
  <p>O</p>
</div>
<div id="panelP" class="js-div">
  <p>P</p>
</div>
<div id="panelQ" class="js-div">
  <p>Q</p>
</div>
<div id="panelR" class="js-div">
  <p>R</p>
</div>
<div id="panelS" class="js-div">
  <p>S</p>
</div>
<div id="panelT" class="js-div">
  <p>T</p>
</div>
<div id="panelU" class="js-div">
  <p>U</p>
</div>
<div id="panelV" class="js-div">
  <p>V</p>
</div>
<div id="panelW" class="js-div">
  <p>W</p>
</div>
<div id="panelX" class="js-div">
  <p>X</p>
</div>
<div id="panelY" class="js-div">
  <p>Y</p>
</div>
<div id="panelZ" class="js-div">
  <p>Z</p>
</div>
<div class="bottombar1"></div>

答案 1 :(得分：0)

在选择字母中添加一个类并应用背景颜色。在单击下一个字母时也删除该类

function letterChange() {
  var prevSelected = document.getElementsByClassName("flip selected");
  
  if(prevSelected.length > 0){
     prevSelected[0].classList.remove("selected")
  }
/*  for(var i=0; i< letters.length;i++){
     letters[i].classList.remove("selected");
  }*/
  
  this.className += ' selected';
  var panelId = 'panel' + this.innerText;
  var panels = document.querySelectorAll('.js-div');
  [].forEach.call(panels, function(e) {
    if (e.id == panelId)
       e.style.display = "block";
    else
       e.style.display = "none";
  });     
}

// Add click event listener
var lis = document.querySelectorAll('.flip');
[].forEach.call(lis, function(e) {
  e.addEventListener("click", letterChange);
});
.alphabet {
list-style-type: none;
    margin:0px auto 0;
    padding:0;
    cursor: pointer;
    width:100%;
    text-align:center;
}

.alphabet li {
float:left;
    margin:0;
    padding:0;
    border-right:1px solid darkgrey;
    font-size: 13px;
    font-family:Verdana;
    -moz-box-sizing:border-box;
    color:black;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:3.84%;
}

.alphabet li:last-child {
  border-right: none;
}

.alphabet li:hover ,.selected{
  color: #005bab;
  background-color: #e2ecf6;
}

.bottombar1{
       content: "";
       display:block;
       height:0.7em;
       width:100%;
       background-color:#00688B;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ {
  display: none;
}

#panelA,#panelB,#panelC,#panelD,#panelE,#panelF,#panelG,#panelH,
#panelI,#panelJ,#panelK,#panelL,#panelM,#panelN,#panelO,#panelP,
#panelQ,#panelR,#panelS,#panelT,#panelU,#panelV,#panelW,#panelX,
#panelY,#panelZ {
    display: none;
    font-size: 16px;
    text-align: center;
    background-color:#e2ecf6;
    border-style:solid;
    border-width:1px;
    padding-top:5px;
    padding-bottom:5px;
    border-color:transparent;
    color: #005bab;
    margin: auto;
}
<div>
  <ul class="alphabet">
    <li class="flip">A</li>
    <li class="flip">B</li>
    <li class="flip">C</li>
    <li class="flip">D</li>
    <li class="flip">E</li>
    <li class="flip">F</li>
    <li class="flip">G</li>
    <li class="flip">H</li>
    <li class="flip">I</li>
    <li class="flip">J</li>
    <li class="flip">K</li>
    <li class="flip">L</li>
    <li class="flip">M</li>
    <li class="flip">N</li>
    <li class="flip">O</li>
    <li class="flip">P</li>
    <li class="flip">Q</li>
    <li class="flip">R</li>
    <li class="flip">S</li>
    <li class="flip">T</li>
    <li class="flip">U</li>
    <li class="flip">V</li>
    <li class="flip">W</li>
    <li class="flip">X</li>
    <li class="flip">Y</li>
    <li class="flip">Z</li>
  </ul>
</div>
<br style="line-height:25px;"/>
<div id="panelA" class="js-div">
  <p>A</p>
</div>
<div id="panelB" class="js-div">
  <p>B</p>
</div>
<div id="panelC" class="js-div">
  <p>C</p>
</div>
<div id="panelD" class="js-div">
  <p>D</p>
</div>
<div id="panelE" class="js-div">
  <p>E</p>
</div>
<div id="panelF" class="js-div">
  <p>F</p>
</div>
<div id="panelG" class="js-div">
  <p>G</p>
</div>
<div id="panelH" class="js-div">
  <p>H</p>
</div>
<div id="panelI" class="js-div">
  <p>I</p>
</div>
<div id="panelJ" class="js-div">
  <p>J</p>
</div>
<div id="panelK" class="js-div">
  <p>K</p>
</div>
<div id="panelL" class="js-div">
  <p>L</p>
</div>
<div id="panelM" class="js-div">
  <p>M</p>
</div>
<div id="panelN" class="js-div">
  <p>N</p>
</div>
<div id="panelO" class="js-div">
  <p>O</p>
</div>
<div id="panelP" class="js-div">
  <p>P</p>
</div>
<div id="panelQ" class="js-div">
  <p>Q</p>
</div>
<div id="panelR" class="js-div">
  <p>R</p>
</div>
<div id="panelS" class="js-div">
  <p>S</p>
</div>
<div id="panelT" class="js-div">
  <p>T</p>
</div>
<div id="panelU" class="js-div">
  <p>U</p>
</div>
<div id="panelV" class="js-div">
  <p>V</p>
</div>
<div id="panelW" class="js-div">
  <p>W</p>
</div>
<div id="panelX" class="js-div">
  <p>X</p>
</div>
<div id="panelY" class="js-div">
  <p>Y</p>
</div>
<div id="panelZ" class="js-div">
  <p>Z</p>
</div>
<div class="bottombar1"></div>

相关问题
最新问题