小编use*_*584的帖子

我想做的是Loading header tag应该动画直到进度条达到100%.任何人都可以帮我这样做吗？

animate.css链接:https://daneden.github.io/animate.css/

当前输出:http://jsfiddle.net/GZSH6/45/

我的问题是,当我点击链接(例如第二页)时,它将在屏幕上显示第二页.但是当我重新加载页面时,当前页面没有保存,而是恢复到默认页面.

如何将所需页面从刷新保留到默认页面？

JavaScript的:

<script type="text/javascript"> 
    $(function(){
        $('.one').show();
        $('.two').hide();
        $('.three').hide();
        $('#show_one, #show_one1').click(function(){
            $('.one').show();
            $('.two').hide();
            $('.three').hide();
            $('.modal').modal('hide');
            return false;
        });
        $('#show_two, #show_two2').click(function(){
            $('.one').hide();
            $('.two').show();
            $('.three').hide();
            $('.modal').modal('hide');
            return false;
        });
        $('#show_three, #show_three3').click(function(){
            $('.one').hide();
            $('.two').hide();
            $('.three').show();
            $('.modal').modal('hide');
            return false;
        });
    });
</script>

HTML:

<nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="" id="show_one"> One</a></li>
                <li><a href="" id="show_two"> Two</a></li>
                <li><a href="" id="show_three"> Three</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <a data-toggle="modal" data-target="#myModal"> Modal Dialog</a>
            </ul>
        </div>
        </div>
    </nav> …

我的问题是,当我尝试运行它并尝试更改浏览器中的选项卡并再次返回时,百分比不仅仅是100%最终结果.但是,如果我在进度运行时不更改选项卡,那么它的工作非常完美.

HTML

<div class="container">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 0%;"></div>
    </div>
</div>

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css');
 .container {
    margin-top: 30px;
    width: 400px;
}

使用Javascript

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 40);
    }
    $bar.text($bar.width() / 4 + "%");
}, 800);

小提琴:http://jsfiddle.net/5w5ku/1/