Question

大家好我想做的是使用单页切换表单（使用javascript显示/隐藏）但每次刷新页面时它都会返回默认表单。现在我有一个javascript代码，即使用户刷新页面也不会返回默认表单，这将使当前表单保持不变。

我的问题是我当前的脚本它在url中创建了一个哈希标题...如何在不影响脚本功能的情况下隐藏哈希？或者在jquery / javascript中有没有其他技巧？有人可以帮我吗？

脚本：

<script type="text/javascript"> 
    $(function(){
    $('.myFirst').hide();
    $('.mySecond').hide();
    $('.myThird').hide();
    $('#show_first').click(function(){
        parent.location.hash = 'first';
        $('.myFirst').show();
        $('.mySecond').hide();
        $('.myThird').hide();
        $('.modal').modal('hide');
        return false;
    });
    $('#show_second').click(function(){
        parent.location.hash = 'second';
        $('.myFirst').hide();
        $('.mySecond').show();
        $('.myThird').hide();
        $('.modal').modal('hide');
        return false;
    });
    $('#show_third').click(function(){
        parent.location.hash = 'third';
        $('.myFirst').hide();
        $('.mySecond').hide();
        $('.myThird').show();
        $('.modal').modal('hide');
        return false;
    });
    $('#show_' + parent.location.hash.substr(1)).click();
});
</script>

模态链接：

<a data-toggle="modal" data-target="#myModal"> Modal Dialog</a>

模态对话框代码：

<div class="container">
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" id="show_first" class="btn btn-info" data-dismiss="modal" aria-hidden="true">First</button>
                                            <button type="button" id="show_second" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Second</button>
                                            <button type="button" id="show_third" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Third</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
</div>

html代码：

<div class="container">
        <div class="myFirst">
            <div class="row">
                <center>
                    First Page
                </center>
             </div>
        </div>
        <div class="mySecond">
            <div class="row">
                <center>
                    Second Page
                </center>
             </div>
        </div>
        <div class="myThird">
            <div class="row">
                <center>
                    Third Page
                </center>
             </div>
        </div>
</div>

Answer 1

您可以将表单的id存储在cookie中，然后在页面刷新后使用id将焦点放在使用该表单的id的表单上。

Answer 2

您可以使用HTML5和pushState https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries

更改网页的网址

如何在url中隐藏父位置哈希

2 个答案: