js动态控制导航栏样式

导航栏一般做为母版页，为了使增加用户体验，往往在用户进入某个页面给予导航栏相应的样式，这里可以用js动态添加

<div class="box_left fl">
    <dl class="box_Order">
        <dt>订单中心dt>
        <dd><a href="/user/UserOrder">我的订单a>dd>
        <dd><a href="/user/Comment">我的评价a>dd>
        <dd><a href="/user/ConsultingReply">咨询回复及投诉a>dd>
        <dd><a href="#">返修退换货a>dd>
    dl>
    <dl class="box_Order box_Order1">
        <dt>我的关注dt>
        <dd><a href="/user/UserAttentionProduct">关注的商品a>dd>
        <dd><a href="/user/UserAttentionStore">关注的商铺a>dd>
        <dd><a href="/user/UserBrowse">浏览历史a>dd>
    dl>
    <dl class="box_Order box_Order1">
        <dt>我的金融dt>
        <dd><a href="#">我的养老账户a>dd>
        <dd><a href="#">我的金币a>dd>
        <dd><a href="#">我的理财a>dd>
        <dd><a href="#">优惠券a>dd>
    dl>
    <dl class="box_Order box_Order1">
        <dt>我的慈善dt>
        <dd><a href="#">我的文章a>dd>
        <dd><a href="#">我的活动a>dd>
        <dd><a href="#">申请养老金a>dd>
    dl>
div>
<script type="text/javascript">
    $(function () {
        var splitStr = window.location.href.split("?")[0].split("/");
        var page = splitStr[splitStr.length - 1].toLocaleLowerCase();
        $("a", ".box_left",".fl").each(function (i, u) { 
             //i用来计数，u获取当前对象
            var temp = $(u).attr("href").split('/');
            if (temp[temp.length - 1].toLocaleLowerCase() == page) {            
                $(u).removeClass().addClass("active");
            };
        });
    });
script>

 

转载于:https://www.cnblogs.com/xbblogs/p/4917198.html