jQuery根据浏览器的url判断显示当前栏目高亮
  • 分享到微信朋友圈
    X
立即下载

文章内容

本文介绍jQuery如何根据当前页面url判断导航栏目项是否高亮，原理就是判断当前页面地址是否包含rel值得内容，如果包含就高亮显示该栏目.

完整代码

<!DOCTYPE html >
<html>
<head>
    <script src="jquery.min.js" type="text/javascript"></script>
    <style>
        *
        {
            margin: 0;
            padding: 0;
            list-style-type: none;
            box-sizing: border-box;
        } 
        a
        {
            text-decoration: none;
        }
        #jqfree li
        {
            float: left;
            padding: 0px 20px;
        }
        #jqfree li a
        {
            color: #333;
            font-size: 16px;
            line-height: 40px;
            display: inline-block;
        }
        #jqfree li.cur
        {
            background: #ff0000;
        }
        #jqfree li.cur a
        {
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="jqfree">
        <ul>
            <li rel="index.html"><a href="index.html">首页</a></li>
            <li rel="about.html"><a href="about.html">关于我们</a></li>
            <li rel="pro.html"><a href="pro.html">产品中心</a></li>
            <li rel="news.html"><a href="news.html">新闻资讯</a></li>
            <li rel="map.html"><a href="map.html">销售网络</a></li>
            <li rel="cobtact.html"><a href="contact.html">联系我们</a></li>
        </ul>
    </div>
    <script>
        $(function () {
            var url = location.href;
            //获取浏览器的url
            var status = false; //标记

            //遍历导航li
            $("#jqfree li").each(function () {
                //判断导航里面的rel和url地址是否相等
                if ((url + '/').indexOf($(this).attr('rel')) > -1 && $(this).attr('rel') != '') {
                    $(this).addClass('cur');
                    status = true;
                } else {
                    $(this).removeClass('cur');
                }
            });
            //默认首页图标高亮
            if (!status) { $("#jqfree li").eq(0).addClass('cur'); }
        });
    </script>
</body>
</html>