html active属性

源代码

<div class="col-md-3">
        <div class="list-group">
            <a  href="{{ url_for('home.user') }}" class="list-group-item active">
                <span class="glyphicon glyphicon-user"></span>&nbsp;会员中心
            </a>
             <a   href="{{ url_for('home.pwd') }}" class="list-group-item">
                <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密码
            </a>
            <a   href="{{ url_for('home.comments') }}" class="list-group-item">
                <span class="glyphicon glyphicon-comment"></span>&nbsp;评论记录
            </a>
            <a  href="{{ url_for('home.loginlog') }}" class="list-group-item">
                <span class="glyphicon glyphicon-calendar"></span>&nbsp;登录日志
            </a>
            <a   href="{{ url_for('home.moviecol') }}" class="list-group-item">
                <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影
            </a>
        </div>
    </div>

更换选项 active激活项不变

修改：

1.增加id

2.去掉active

3.在相应页面添加jquery事件

<div class="col-md-3">
        <div class="list-group">
            <a id = "m-1" href="{{ url_for('home.user') }}" class="list-group-item ">
                <span class="glyphicon glyphicon-user"></span>&nbsp;会员中心
            </a>
             <a  id = "m-2" href="{{ url_for('home.pwd') }}" class="list-group-item">
                <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密码
            </a>
            <a  id = "m-3" href="{{ url_for('home.comments') }}" class="list-group-item">
                <span class="glyphicon glyphicon-comment"></span>&nbsp;评论记录
            </a>
            <a  id = "m-4" href="{{ url_for('home.loginlog') }}" class="list-group-item">
                <span class="glyphicon glyphicon-calendar"></span>&nbsp;登录日志
            </a>
            <a id = "m-5"  href="{{ url_for('home.moviecol') }}" class="list-group-item">
                <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影
            </a>
        </div>
    </div>

　　<script>
        $(document).ready(function () {
            $("#m-1").addClass("active");
        })
    </script>

 

转载于:https://www.cnblogs.com/jokerq/p/8966890.html