横向导航栏基础设计(精)

包含打开网页对应导航栏标签连接地址时,背景颜色自动改变.
做完后的效果如下图:
CSS代码

<style>
	*{
        margin: 0;
        padding: 0;
    }
    
    #navigate{
        height: 60px;                   /* 导航栏的高度  */
        text-align:center;              /* 设置DIV容器内的文字居中 */
        background-color: black;      /* 设置DIV容器的背景颜色 */
    }

    #navigateUl li{
        list-style-type:none;           /* 设置列表样式为无 */
        display:inline;                 /* 设置列表的li横向展示 */
        
    }

    #navigateUl li a{
        font-size:20px;                 /* 字体大小 */
        line-height:60px; 		        /* 实现垂直平衡选中的文字块的行高,选择跟导航栏高度一致即可 */
        text-decoration: none;          /* 去掉连接下划线  */
        padding: 17px 50px;             /* 内边距,上下 左右 */
        color: brown;                 /* 字体颜色 */
        font-weight: bold;              /* 字体加粗 */
    }

    #navigateUl li a:hover{
        background-color: #d8d8d8;      /* 鼠标选中的文字块的颜色 */
    }
</style>

HTML代码

 <div id="navigate">
        <ul id="navigateUl">
            <li>
                <a href="">标题一</a>
            </li>
            <li>
                <a href="">标题二</a>
            </li>
            <li>
                <a href="">标题三</a>
            </li>
            <li>
                <a href="">标题四</a>
            </li>
            <li>
                <a href="">标题五</a>
            </li>
        </ul>
    </div>

CSS代码

    <script>
        /*
           打开网址对应导航栏页面时，该导航栏a标签背景颜色改变。
        */
        var navigate = document.getElementById("navigate");
            var getAllA = navigate.getElementsByTagName("a");
            for (var i = 0; i < getAllA.length; i++) {
                //获得所有A标签的超链接地址：
                var getUrl = getAllA[i].href;
                //把超链接地址，做成正则表达式
                var pattern = new RegExp(getUrl);
                //检查超链接地址，是否匹配地址栏的地址。
                var result = pattern.test(location.href);
                //如果匹配，则设置style的背景颜色，并且退出循环。
                if (result) {
                    getAllA[i].style.backgroundColor = "#d89e96";
                    break;
                }
            }
    </script>