js导航栏处于选中状态

最新推荐文章于 2022-08-19 10:35:52 发布

luckymaoyy

最新推荐文章于 2022-08-19 10:35:52 发布

阅读量2.2k

点赞数 1

分类专栏： javascript 文章标签： javascript

javascript 专栏收录该内容

10 篇文章 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].onclick=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>

luckymaoyy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js导航栏处于选中状态

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { margin: 0px; padding: 0px;
复制链接

扫一扫

专栏目录