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>