zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    Django-admin导出到表格
    Django1.11.4中文文档
    Django+uwsgi+nginx+angular.js项目部署
    angular.js 入门
    枚举类型的总结
    基于websocket的页面聊天程序
    java网络编程(三):一个类似QQ的聊天程序
    java网络编程(二)
    java网络编程(一)
    java中的序列化与反序列化,还包括将多个对象序列化到一个文件中
  • 原文地址:https://www.cnblogs.com/xbblogs/p/4917198.html
Copyright © 2011-2022 走看看