鍍金池/ 問答/PHP  HTML/ JS實(shí)現(xiàn)菜單點(diǎn)擊后變色

JS實(shí)現(xiàn)菜單點(diǎn)擊后變色

為什么在href加入鏈接后菜單字體顏色會還原？如何用js實(shí)現(xiàn)菜單點(diǎn)擊后變色（不要用target=_blank）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset = utf-8" />
<style>
a{color:#999;}
</style>
</head>
<body>
    <a href="javascript:void(0)" class="item" onclick="changeA()" id="menuA">菜單A</a>
    <a href="javascript:void(0)" class="item" onclick="changeB()" id="menuB">菜單B</a>
    <a href="javascript:void(0)" class="item" onclick="changeC()" id="menuC">菜單C</a>
    <a href="javascript:void(0)" class="item" onclick="changeD()" id="menuD">菜單D</a>

<script type="text/javascript">
function changeA(){
document.getElementById("menuA").style.color='#088888';
document.getElementById("menuB").style.color='#999999';
document.getElementById("menuC").style.color='#999999';
document.getElementById("menuD").style.color='#999999';
}
function changeB(){
document.getElementById("menuB").style.color='#088888';
document.getElementById("menuA").style.color='#999999';
document.getElementById("menuC").style.color='#999999';
document.getElementById("menuD").style.color='#999999';
}
function changeC(){
document.getElementById("menuC").style.color='#088888';
document.getElementById("menuA").style.color='#999999';
document.getElementById("menuB").style.color='#999999';
document.getElementById("menuD").style.color='#999999';
}
function changeD(){
document.getElementById("menuD").style.color='#088888';
document.getElementById("menuA").style.color='#999999';
document.getElementById("menuB").style.color='#999999';
document.getElementById("menuC").style.color='#999999';
}
</script>
</body>
</html>
回答
編輯回答
硬扛

a:visited {color:#FF000;}

2018年5月1日 23:23
編輯回答
念初

用了事件委托

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset = utf-8" />
<style>
a{color:#999;}
</style>
</head>
<body>

    <a href="javascript:void(0)">菜單A</a>
    <a href="javascript:void(0)">菜單B</a>
    <a href="javascript:void(0)">菜單C</a>
    <a href="javascript:void(0)">菜單D</a>

<script type="text/javascript">

  document.onclick = function (e) {
    var target = e.target
    init()
    target.style.color = 'red'
  }
  function init () {
    var nodes = [...new Set(document.getElementsByTagName('a'))]
    nodes.forEach(item => {
      item.style.color = '#999'
    })
  }
</script>
</body>
</html>
2018年5月6日 17:38
編輯回答
懷中人
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body> 
    <a href="javascript:;" onclick="highlightMe(this)">link-A</a>
    <a href="javascript:;" onclick="highlightMe(this)">link-B</a>
    <a href="javascript:;" onclick="highlightMe(this)">link-C</a>
    <a href="javascript:;" onclick="highlightMe(this)">link-D</a>
<script> 
    function highlightMe(elem){
        elem.style.color = "red";
    }
</script>
</body>
</html>
2017年6月28日 07:07