jq 菜单选中状态

最新推荐文章于 2022-02-14 15:33:24 发布

canglingyue

最新推荐文章于 2022-02-14 15:33:24 发布

阅读量714

点赞数

分类专栏： js+jq

本文链接：https://blog.csdn.net/canglingyue/article/details/50460585

版权

js+jq 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#left {
width: 200px;
height: 9999px;
background: #f7fafc;
border-right: 1px solid #e5ebf1;
float: left;
}
#left div {
height: 40px;
color: #384463;
font-size: 14px;
line-height: 40px;
border-bottom: 1px solid #f6fafd;
border-top: 1px solid #f6fafd;
text-align: center;
}
#left div:hover {
background: #06C;
cursor:pointer;
color: #FFF
}
</style>
</head>
 
<body>
<div id="left">
  <div>导航1</div>
  <div>导航2</div>
  <div>导航3</div>
  <div>导航4</div>
  <div>导航5</div>
</div>
</body>
<script>
function js(id)
{
    return document.getElementById(id).getElementsByTagName("div");
}
for(var i=0;i<js("left").length;i++)
{
    js("left")[i].οnclick=function(){
        delBackgroundColor();
        this.style.background = "#06C";
        this.style.color = "#fff";
    }
}
function delBackgroundColor()
{
    for(var i=0;i<js("left").length;i++)
    {
        js("left")[i].style.background = '';
        js("left")[i].style.color = '#384463';
    }
}
</script>
</html>

canglingyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq 菜单选中状态

body {margin: 0px;padding: 0px;}#left {width: 200px;height: 9999px;background: #f7fafc;border-right: 1px solid #e5ebf1;float: left;}#left div {height: 40px;color: #384463;font-size: 14px
复制链接

扫一扫

专栏目录