Question

在我的表单中有两个单选按钮 - 当选择收音机时 - 出现div，当选择另一个时 - div隐藏。提交表单后，如果我通过单击浏览器后退按钮返回到表单页面，它会隐藏div部分。当页面刷新或我回去时，我想保留div和单选按钮的状态 - 如何使其工作？这是我的代码 -

＆＃13;

<script type="text/javascript">
    function ShowHideDiv(){
        var ac = document.getElementById("ac");
        var page_link= document.getElementById("page_link");
        page_link.style.display = ac.checked ? "block" : "none";       
    }


HTML code 
  <input type="radio" id="ac" name = "mode"  style="margin-left: 130px;" value = "abc"  onclick="ShowHideDiv()" > abc
  <input type="radio" id="mo" name = "mode"  style="margin-left: 10px;" value="xyz" onclick="ShowHideDiv()" checked> xyz

<div id="page_link" style="display: none;">
Hello How are you !!
</div>

＆＃13;

Answer 1

不是尝试将其用于现有代码，而是使用sessionStorage或localStorage的示例 - 有很多评论可以帮助您确定正在发生的事情和突出你可以为自己的用途挑选的重要部分。

<h1>Tabs & sessionStorage</h1>
<div id='tabs'>
    <div id='t1' data-title='Tab 1'>
        <section>
            <p>Aliquam dapibus convallis volutpat. Vestibulum urna lacus, tempor vel diam nec, viverra gravida est. Integer pharetra tincidunt nisi, ut egestas neque porttitor ut. Quisque ut consequat erat, a accumsan ligula. Maecenas ut placerat nunc. Aliquam finibus ligula ac ex hendrerit, quis blandit sapien sollicitudin. Donec ac velit quis sapien gravida efficitur efficitur eu purus. Etiam non risus mattis, consequat diam in, commodo tellus. </p>
            <p>Morbi nec quam sit amet libero hendrerit malesuada nec nec orci. Quisque sapien nibh, suscipit efficitur sem vitae, vulputate vestibulum quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc vel mauris lacinia lorem dictum vestibulum ut id libero. Vivamus fringilla nulla vitae nulla cursus, tristique ultrices velit viverra. Aliquam suscipit dapibus arcu a consequat. Pellentesque quis neque at orci vestibulum faucibus. Nam quis efficitur elit, eu aliquam magna. Ut sagittis sem vitae dui lobortis tincidunt. Aenean ut lorem ac erat fringilla lacinia vel ac nisl.</p>
        </section>
    </div>
    <div id='t2' data-title='Tab 2'>
        <section><p>Aliquam dapibus convallis volutpat. Vestibulum urna lacus, tempor vel diam nec, viverra gravida est. Integer pharetra tincidunt nisi, ut egestas neque porttitor ut. Quisque ut consequat erat, a accumsan ligula. Maecenas ut placerat nunc. Aliquam finibus ligula ac ex hendrerit, quis blandit sapien sollicitudin. Donec ac velit quis sapien gravida efficitur efficitur eu purus. Etiam non risus mattis, consequat diam in, commodo tellus. </p></section>
    </div>
    <div id='t3' data-title='Tab 3'>
        <section><p>Aliquam dapibus convallis volutpat. Vestibulum urna lacus, tempor vel diam nec, viverra gravida est. Integer pharetra tincidunt nisi, ut egestas neque porttitor ut. Quisque ut consequat erat, a accumsan ligula. Maecenas ut placerat nunc. Aliquam finibus ligula ac ex hendrerit, quis blandit sapien sollicitudin. Donec ac velit quis sapien gravida efficitur efficitur eu purus. Etiam non risus mattis, consequat diam in, commodo tellus. </p></section>
    </div>
    <div id='t4' data-title='Tab 4'>
        <section><p>Aliquam dapibus convallis volutpat. Vestibulum urna lacus, tempor vel diam nec, viverra gravida est. Integer pharetra tincidunt nisi, ut egestas neque porttitor ut. Quisque ut consequat erat, a accumsan ligula. Maecenas ut placerat nunc. Aliquam finibus ligula ac ex hendrerit, quis blandit sapien sollicitudin. Donec ac velit quis sapien gravida efficitur efficitur eu purus. Etiam non risus mattis, consequat diam in, commodo tellus. </p></section>
    </div>
</div>



<script type='text/javascript'>
    /* The name of the storage Item */
    var store='tabs';

    /* a class name used to identify active tab */
    var cn='active';

    /* current value of the storage item, if any */
    var cval=sessionStorage.getItem( store );

    /* A nodelist of tabs within container */
    var col=document.querySelectorAll('div#tabs > div');

    /* Iterate through nodelist */
    for( var n in col )if( col[n].nodeType==1 ){

        /* assign click event handler */
        col[ n ].onclick=function(event){
            /* get reference to current node ( tab ) */
            var el=typeof( event.target )!='undefined' ? event.target : event.srcElement;

            /* set the value into storage item */
            sessionStorage.setItem( store, el.id );

            /* assign class to active and remove from inactive nodes */
            for( var m in col ){
                if( col[m].nodeType==1 ){
                    if( col[m].id==el.id )col[m].classList.add( cn );
                    else col[m].classList.remove( cn );
                }
            }
        }

        /* on load, assign active class to the correct tab */
        if( cval!=null && cval==col[n].id ) col[n].classList.add( cn );
    }
</script>

页面重新加载后，保持或保持无线电切换的div块的状态

1 个答案: