html active attribute

source code

<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>

Replace option active activation item unchanged

Revise:

1. Increase id

2. Remove active

3. Add a jquery event to the corresponding page

<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>

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325007534&siteId=291194637