Hidding打开了面板

时间：2017-05-05 18:19:16

标签： javascript html css

我在下面的代码中使用的是按字母顺序排列的索引，我尝试使用HTML，CSS和JavaScript创建。单击另一个字母时是否可以关闭字母面板？示例：单击＆＃34; A＆＃34;并出现A面板，但是当您点击＆＃34; B＆＃34;出现B面板，A面板保持可见。无论如何关闭＆＃34; A＆＃34;单击一个不同的字母时面板？任何事都有帮助，欢呼。

＆＃13;
＆＃13; 
function myFunctionA() {
    document.getElementById("panelA").style.display = "block";
}
function myFunctionB() {
    document.getElementById("panelB").style.display = "block";
}
function myFunctionC() {
    document.getElementById("panelC").style.display = "block";
}
＆＃13; 
.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: lightgrey;
}

#panelA, #panelB, #panelC {
    display: none;
}
#panelA, #panelB, #panelC, .flip {
    font-size: 16px;
    text-align: center;
    background-color:#fcfcfc;
    border-style:solid;
    border-width:1px;
    border-color:grey;
    color: black;
    margin: auto;
}
＆＃13; 
<div>
<ul class="alphabet">
                        <li class="flip" onclick="myFunctionA()">A</li>
                        <li class="flip" onclick="myFunctionB()">B</li>
                        <li class="flip" onclick="myFunctionC()">C</li>
                        <li>D</li>
                         <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>V</li>
                        <li>W</li>
                        <li>X</li>
                        <li>Y</li>
                        <li>Z</li>
                    </ul>
  </div>
<br/>
<div id="panelA">
  <p>A</p>
</div>
<div id="panelB">
  <p>B</p>
</div>
<div id="panelC">
  <p>C</p>
</div>
＆＃13;
＆＃13;
＆＃13;

8 个答案:

答案 0 :(得分：2)

我们实际上根本不需要任何JavaScript （但是，我在下面提供了一个JavaScript解决方案）。相反，我们可以利用CSS :target 伪类选择器，它会影响作为导航目标的元素（通常是文档中的#位置）。它确实需要更多的HTML，并且它不允许在第二次单击时关闭面板，但最终没有JavaScript，因此更有效率。

看看：

.alphabet {
        list-style-type: none;
        margin:0 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;
        color:black;
        display:inline-block;
        box-sizing:border-box;
        width:3.84%;
}

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

.alphabet li:hover {
        color:#005bab;
        background-color: lightgrey;
}
    
    /* ******************************************************************************** */
    
    a { text-decoration:none; }
    
    /* By default, don't show any panel */
    .flip > div.panel { display:none; }    

    /* This style will only be applied when a click to a target element occurs and
       it will affect the target element. */    
    div.panel:target {
      display:block;
      position:absolute;
      left:0;
      width:100%;
    }

    /* For the <li> and only the panel to be shown: */
    .flip, div.panel:target {
        display: block;
        font-size: 16px;
        text-align: center;
        background-color:#fcfcfc;
        border:1px solid grey;
        color: black;
    }
    
    /* ******************************************************************************** */
<ul class="alphabet">
      <li class="flip"><a href="#panelA">A</a><div id="panelA" class="panel"><p>A</p></div></li>
      <li class="flip"><a href="#panelB">B</a><div id="panelB" class="panel"><p>B</p></div></li>
      <li class="flip"><a href="#panelC">C</a><div id="panelC" class="panel"><p>C</p></div></li> 
      <li class="flip"><a href="#panelD">D</a><div id="panelD" class="panel"><p>D</p></div></li>
      <li class="flip"><a href="#panelE">E</a><div id="panelE" class="panel"><p>E</p></div></li>
      <li class="flip"><a href="#panelF">F</a><div id="panelF" class="panel"><p>F</p></div></li>   
      <li class="flip"><a href="#panelG">G</a><div id="panelG" class="panel"><p>G</p></div></li>
      <li class="flip"><a href="#panelH">H</a><div id="panelH" class="panel"><p>H</p></div></li>
      <li class="flip"><a href="#panelI">I</a><div id="panelI" class="panel"><p>I</p></div></li> 
      <li class="flip"><a href="#panelJ">J</a><div id="panelJ" class="panel"><p>J</p></div></li>
      <li class="flip"><a href="#panelK">K</a><div id="panelK" class="panel"><p>K</p></div></li>
      <li class="flip"><a href="#panelL">L</a><div id="panelL" class="panel"><p>L</p></div></li> 
      <li class="flip"><a href="#panelM">M</a><div id="panelM" class="panel"><p>M</p></div></li>
      <li class="flip"><a href="#panelN">N</a><div id="panelN" class="panel"><p>N</p></div></li>
      <li class="flip"><a href="#panelO">O</a><div id="panelO" class="panel"><p>O</p></div></li> 
      <li class="flip"><a href="#panelP">P</a><div id="panelP" class="panel"><p>P</p></div></li>
      <li class="flip"><a href="#panelQ">Q</a><div id="panelQ" class="panel"><p>Q</p></div></li>
      <li class="flip"><a href="#panelR">R</a><div id="panelR" class="panel"><p>R</p></div></li> 
      <li class="flip"><a href="#panelS">S</a><div id="panelS" class="panel"><p>S</p></div></li> 
      <li class="flip"><a href="#panelT">T</a><div id="panelT" class="panel"><p>T</p></div></li>
      <li class="flip"><a href="#panelU">U</a><div id="panelU" class="panel"><p>U</p></div></li>
      <li class="flip"><a href="#panelV">V</a><div id="panelV" class="panel"><p>V</p></div></li>
      <li class="flip"><a href="#panelW">W</a><div id="panelW" class="panel"><p>W</p></div></li>
      <li class="flip"><a href="#panelX">X</a><div id="panelX" class="panel"><p>X</p></div></li> 
      <li class="flip"><a href="#panelY">Y</a><div id="panelY" class="panel"><p>Y</p></div></li> 
      <li class="flip"><a href="#panelZ">Z</a><div id="panelZ" class="panel"><p>Z</p></div></li>
    </ul>

JavaScript解决方案：

如果我们设置一个名为“show”的类，我们可以根据需要应用它，并使用 element.classList.toggle() 方法将其删除。如果所有面板都默认为隐藏，则取消“show”类会导致样式恢复为默认状态。

此外，通过重新组织HTML结构并对CSS进行一些细微的更改，我们可以显着简化JavaScript。

最后（仅供参考），您所拥有的以供应商为前缀的CSS（-moz-box-sizing: border-box;）都可以删除，因为所有现代浏览器都支持box-sizing。

// Get a "live" collection of all the open panels
var panels = document.getElementsByClassName("show");

// Get all the <li> elements into a collection and loop through them
Array.prototype.slice.call(document.querySelectorAll(".alphabet > li")).forEach(function(item){
  // Set each up to have a click event handler
  item.addEventListener("click", function(e){

    // Hide any previously opened panels exept the current one (if already opened)
    Array.prototype.slice.call(panels).forEach(function(pan){
      e.target.querySelector("div.panel") !== pan ? pan.classList.remove("show"): "";
    });

    // find the panel in the <li> and toggle its display
    item.querySelector("div.panel").classList.toggle("show");

  });
});
.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;
    color:black;
    display:inline-block;
    box-sizing:border-box;
    width:3.84%;
}

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

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

/* By default, don't show any panel */
.flip > div { display:none; }

/* For the <li> and only the panel to be shown: */
.flip, div.show {
    display: block;
    font-size: 16px;
    text-align: center;
    background-color:#fcfcfc;
    border-style:solid;
    border-width:1px;
    border-color:grey;
    color: black;
    margin: auto;
}

/* For the panel to be shown, position it correctly. */
div.show {
    position:absolute;
    left:0;
    width:100%;
}
<ul class="alphabet">
  <li class="flip">A<div class="panel"><p>A</p></div></li>
  <li class="flip">B<div class="panel"><p>B</p></div></li>
  <li class="flip">C<div class="panel"><p>C</p></div></li> 
  <li class="flip">D<div class="panel"><p>D</p></div></li>
  <li class="flip">E<div class="panel"><p>E</p></div></li>
  <li class="flip">F<div class="panel"><p>F</p></div></li>   
  <li class="flip">G<div class="panel"><p>G</p></div></li>
  <li class="flip">H<div class="panel"><p>H</p></div></li>
  <li class="flip">I<div class="panel"><p>I</p></div></li> 
  <li class="flip">J<div class="panel"><p>J</p></div></li>
  <li class="flip">K<div class="panel"><p>K</p></div></li>
  <li class="flip">L<div class="panel"><p>L</p></div></li> 
  <li class="flip">M<div class="panel"><p>M</p></div></li>
  <li class="flip">N<div class="panel"><p>N</p></div></li>
  <li class="flip">O<div class="panel"><p>O</p></div></li> 
  <li class="flip">P<div class="panel"><p>P</p></div></li>
  <li class="flip">Q<div class="panel"><p>Q</p></div></li>
  <li class="flip">R<div class="panel"><p>R</p></div></li> 
  <li class="flip">S<div class="panel"><p>S</p></div></li> 
  <li class="flip">T<div class="panel"><p>T</p></div></li>
  <li class="flip">U<div class="panel"><p>U</p></div></li>
  <li class="flip">V<div class="panel"><p>V</p></div></li> 
  <li class="flip">W<div class="panel"><p>W</p></div></li>
  <li class="flip">X<div class="panel"><p>X</p></div></li>
  <li class="flip">Y<div class="panel"><p>Y</p></div></li> 
  <li class="flip">Z<div class="panel"><p>Z</p></div></li>  
</ul>

答案 1 :(得分：1)

你需要改变这个

function myFunctionA() {
    document.getElementById("panelA").style.display = "block";
}
function myFunctionB() {
    document.getElementById("panelB").style.display = "block";
}
function myFunctionC() {
    document.getElementById("panelC").style.display = "block";
}

到这个

function myFunctionA() {
    document.getElementById("panelA").style.display = "block";
    document.getElementById("panelB").style.display = "none";
    document.getElementById("panelC").style.display = "none";
}
function myFunctionB() {
    document.getElementById("panelB").style.display = "block";
    document.getElementById("panelA").style.display = "none";
    document.getElementById("panelC").style.display = "none";
}
function myFunctionC() {
    document.getElementById("panelC").style.display = "block";
    document.getElementById("panelB").style.display = "none";
    document.getElementById("panelA").style.display = "none";
}

如果您将使用所有字母表我建议使用此代码

function myFunctionA() {
            ClearAllPanel();
    document.getElementById("panelB").style.display = "block";

}
function myFunctionB() {
    ClearAllPanel();
    document.getElementById("panelB").style.display = "block";
}
function myFunctionC() {
    ClearAllPanel();
    document.getElementById("panelC").style.display = "block";
}
function ClearAllPanel(){
    for (var i = 65; i <=  90; i++) {
        document.getElementById("panel"+String.fromCharCode(i)).style.display = "none";
    }
}

答案 2 :(得分：1)

HTML class属性对您的案例非常有用

  1. 为所有小组class添加panel。
  2. 点击字母表 一个。隐藏所有面板（具有类panel的所有元素） 湾然后显示具有相同点击字母的id面板。

    3. 示例： 

    function showPanel(name) {
    hideAllPanels();
    document.getElementById("panel-"+ name).style.display = "block";
}
var panels = document.getElementsByClassName('panel');
function hideAllPanels () {
  var i;
  for (i = 0; i < panels.length; i+= 1){
    panels[i].style.display = "none";
  }
}
    .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: lightgrey;
}

.panel{
    display: none;
}
.panel, .flip {
    font-size: 16px;
    text-align: center;
    background-color:#fcfcfc;
    border-style:solid;
    border-width:1px;
    border-color:grey;
    color: black;
    margin: auto;
}
    <div>
<ul class="alphabet">
                        <li class="flip" onclick="showPanel('a')">A</li>
                        <li class="flip" onclick="showPanel('b')">B</li>
                        <li class="flip" onclick="showPanel('c')">C</li>
                        <li>D</li>
                         <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>V</li>
                        <li>W</li>
                        <li>X</li>
                        <li>Y</li>
                        <li>Z</li>
                    </ul>
  </div>
<br/>
<div id="panel-a" class="panel">
  <p>A</p>
</div>
<div id="panel-b" class="panel">
  <p>B</p>
</div>
<div id="panel-c" class="panel">
  <p>C</p>
</div>

答案 3 :(得分：1)

纯JavaScript中更短的版本：

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: lightgrey;
}

#panelA,
#panelB,
#panelC {
  display: none;
}

#panelA,
#panelB,
#panelC,
.flip {
  font-size: 16px;
  text-align: center;
  background-color: #fcfcfc;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
  color: black;
  margin: auto;
}
<div>
  <ul class="alphabet">
    <li class="flip">A</li>
    <li class="flip">B</li>
    <li class="flip">C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
    <li>O</li>
    <li>P</li>
    <li>Q</li>
    <li>R</li>
    <li>S</li>
    <li>T</li>
    <li>U</li>
    <li>V</li>
    <li>W</li>
    <li>X</li>
    <li>Y</li>
    <li>Z</li>
  </ul>
</div>
<br/>
<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>

答案 4 :(得分：1)

下面是一个更简短的解决方案，您不需要为每个字母编写新功能或新的面板div。

在这里，您只需将面板div的innerHTML更改为单击的任何字母。

修改：我会添加更多信息，以使这个答案更有帮助。

如果你需要在div中显示的其他单词不仅仅是被点击内容的innerHTML，显然这个解决方案不起作用，你需要为你不使用的所有div设置display为none想表明，这里有很多答案。

我希望人们可以从中学到这一点，但是，你不需要单独设置所有内容，只要你发现自己重复同样的事情，只需稍作修改，就会有更有效的方法。我将在底部添加一个演示＃2，以展示如何使用一个函数有效地将所有不需要的div设置为display: none;。

演示

let letters = document.querySelectorAll("#alphabet li");

for (i = 0; i < letters.length; i++){
  letters[i].addEventListener('click', function(){
    document.querySelector("#panel p").innerHTML = this.innerHTML;
    document.querySelector("#panel").style.display = 'block';
  })
}
#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: lightgrey;
}

#panel {
    display: none;
    font-size: 16px;
    text-align: center;
    background-color:#fcfcfc;
    border-style:solid;
    border-width:1px;
    border-color:grey;
    color: black;
    margin: auto;
}
<div>
<ul id="alphabet">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
      <li>G</li>
      <li>H</li>
      <li>I</li>
      <li>J</li>
      <li>K</li>
      <li>L</li>
      <li>M</li>
      <li>N</li>
      <li>O</li>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
      <li>U</li>
      <li>V</li>
      <li>W</li>
      <li>X</li>
      <li>Y</li>
      <li>Z</li>
  </ul>
</div>
<br/>
<div id="panel">
  <p></p>
</div>

演示＃2 

let letters = document.querySelectorAll("#alphabet li");

for (i = 0; i < letters.length; i++){
  letters[i].addEventListener('click', function(){
    let letter = this.innerHTML;
    
    let panels = document.getElementsByClassName('panel');
    for (i = 0; i < panels.length; i++){
      if (panels[i].id !== letter){
        panels[i].style.display = 'none';
      }
      else {
        panels[i].style.display = 'block';
      }
    }
  })
}
#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: lightgrey;
}

.panel {
    display: none;
    font-size: 16px;
    text-align: center;
    background-color:#fcfcfc;
    border-style:solid;
    border-width:1px;
    border-color:grey;
    color: black;
    margin: auto;
}
<div>
<ul id="alphabet">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
      <li>G</li>
      <li>H</li>
      <li>I</li>
      <li>J</li>
      <li>K</li>
      <li>L</li>
      <li>M</li>
      <li>N</li>
      <li>O</li>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
      <li>U</li>
      <li>V</li>
      <li>W</li>
      <li>X</li>
      <li>Y</li>
      <li>Z</li>
  </ul>
</div>
<br/>
<div class="panel" id="A">
  <p>Some text for link A</p>
</div>
<div class="panel" id="B">
  <p>Some text for link B</p>
</div>
<div class="panel" id="C">
  <p>Some text for link C</p>
</div>
<div class="panel" id="D">
  <p>Some text for link D</p>
</div>
<div class="panel" id="E">
  <p>Some text for link E</p>
</div>
<div class="panel" id="F">
  <p>Some text for link F</p>
</div>
<div class="panel" id="G">
  <p>Some text for link G</p>
</div>
<div class="panel" id="H">
  <p>Some text for link H</p>
</div>
<div class="panel" id="I">
  <p>Some text for link I</p>
</div>
<div class="panel" id="J">
  <p>Some text for link J</p>
</div>
<div class="panel" id="K">
  <p>Some text for link K</p>
</div>
<div class="panel" id="L">
  <p>Some text for link L</p>
</div>
<div class="panel" id="M">
  <p>Some text for link M</p>
</div>
<div class="panel" id="N">
  <p>Some text for link N</p>
</div>
<div class="panel" id="O">
  <p>Some text for link O</p>
</div>
<div class="panel" id="P">
  <p>Some text for link P</p>
</div>
<div class="panel" id="Q">
  <p>Some text for link Q</p>
</div>
<div class="panel" id="R">
  <p>Some text for link R</p>
</div>
<div class="panel" id="S">
  <p>Some text for link S</p>
</div>
<div class="panel" id="T">
  <p>Some text for link T</p>
</div>
<div class="panel" id="U">
  <p>Some text for link U</p>
</div>
<div class="panel" id="V">
  <p>Some text for link V</p>
</div>
<div class="panel" id="W">
  <p>Some text for link W</p>
</div>
<div class="panel" id="X">
  <p>Some text for link X</p>
</div>
<div class="panel" id="Y">
  <p>Some text for link Y</p>
</div>
<div class="panel" id="Z">
  <p>Some text for link Z</p>
</div>

答案 5 :(得分：-1)

您必须将其设置为可见的而不是其他人，例如：

document.getElementById("panelA").style.display = "block";
document.getElementById("panelB").style.display = "none";

答案 6 :(得分：-1)

function myFunctionA() {
    document.getElementById("panelA").style.display = "block";
    document.getElementById("panelB").style.display = "none";
    document.getElementById("panelC").style.display = "none";
}
function myFunctionB() {
    document.getElementById("panelB").style.display = "block";
    document.getElementById("panelA").style.display = "none";
    document.getElementById("panelC").style.display = "none";
}
function myFunctionC() {
    document.getElementById("panelC").style.display = "block";
    document.getElementById("panelA").style.display = "none";
    document.getElementById("panelB").style.display = "none";
}

答案 7 :(得分：-1)

如果你这样做会怎么样：

function myFunctionA() {
    document.getElementById("panelA").style.display = "block";
    document.getElementById("panelB").style.display = "none";
    document.getElementById("panelC").style.display = "none";
}
function myFunctionB() {
    document.getElementById("panelB").style.display = "block";
    document.getElementById("panelA").style.display = "none";
    document.getElementById("panelC").style.display = "none";
}
function myFunctionC() {
    document.getElementById("panelC").style.display = "block";
    document.getElementById("panelA").style.display = "none";
    document.getElementById("panelB").style.display = "none";
}
.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: lightgrey;
}

#panelA, #panelB, #panelC {
    display: none;
}
#panelA, #panelB, #panelC, .flip {
    font-size: 16px;
    text-align: center;
    background-color:#fcfcfc;
    border-style:solid;
    border-width:1px;
    border-color:grey;
    color: black;
    margin: auto;
}
<div>
<ul class="alphabet">
                        <li class="flip" onclick="myFunctionA()">A</li>
                        <li class="flip" onclick="myFunctionB()">B</li>
                        <li class="flip" onclick="myFunctionC()">C</li>
                        <li>D</li>
                         <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>V</li>
                        <li>W</li>
                        <li>X</li>
                        <li>Y</li>
                        <li>Z</li>
                    </ul>
  </div>
<br/>
<div id="panelA">
  <p>A</p>
</div>
<div id="panelB">
  <p>B</p>
</div>
<div id="panelC">
  <p>C</p>
</div>

相关问题
最新问题