问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JS实现菜单点击后变色

头像
wjnds
    18122946

    为什么在href加入链接后菜单字体颜色会还原？如何用js实现菜单点击后变色（不要用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>
    javascriptphphtmlcssnode.js
    阅读 6.4k
    3 个回答
    得票最新
    头像
    cool_油
      65711528

      a:visited {color:#FF000;}

      头像
      Safiir
        3212
        <!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>
        头像
        闲岁
          18427

          用了事件委托

          <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>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题