Question

伙计我在div选择中遇到问题。我必须在我的代码中使用大量潜水。但同时我在标题处有后退按钮，所以我想要按下后退按钮然后我移动到后面的div。

这是我的java脚本代码。

<script type="text/javascript">
function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';

    hideAllBut(id);
}

function hideAllBut(id) {
    var lists = document.querySelectorAll('.list');
    for (var i = lists.length; i--;) {
        if (lists[i].id != id) {
            lists[i].style.display = 'none';
        }
    }
}

</script>

这是我的html代码示例。

  <style>
  body{
  }
  #list1 {background-color: coral;}
  #list2 {background-color: #45cd2a;}
  #list3 {background-color: #ab4d2a;}
  </style>
  <form action="????" >
  <button> Go to back div</button>
   </form>
   <a href="#" onclick="toggle_visibility('list1');">List One</a>
   <a href="#" onclick="toggle_visibility('list2');">List Two</a>
   <input type="button" value="List Four" onclick="toggle_visibility('list3');"> 
   </input>

<div id="list1" class="list" style="display:none;">
<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>
</div>
 <div id="list2" class="list" style="display:none;">
 <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
 </ul>
 </div>
 <div id="list3" class="list" style="display:none;">
 <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>
</div>
</body>
</html>

此代码工作正常，但我不知道如何实现后退按钮返回div .. ?? 请帮助我。

Answer 1

试试这个：

Html：

<body>

  <button onclick="back()"> Go to back div</button>  
  <form action="????" >

   </form>
   <a href="#" onclick="toggle_visibility('list1');">List One</a>
   <a href="#" onclick="toggle_visibility('list2');">List Two</a>
   <input type="button" value="List Four" onclick="toggle_visibility('list3');"> 
   </input>

<div id="list1" class="list" style="display:none;">
<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>
</div>
 <div id="list2" class="list" style="display:none;">
 <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
 </ul>
 </div>
 <div id="list3" class="list" style="display:none;">
 <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>
</div>
</body>

JS：

var divHistory=new Array();
function back(){

    if(divHistory.length>0){
        var id=divHistory.pop();
        var curId=document.getElementById(id);
        curId.style.display = 'none';
        alert(id);;
        if(divHistory.length>0){
            id=divHistory.pop();
            var prevId=document.getElementById(id);
            prevId.style.display = 'block';         
        }       
    }
}
function toggle_visibility(id) {

    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';
    hideAllBut(id);
    divHistory.push(id);
}

function hideAllBut(id) {
    var lists = document.querySelectorAll('.list');
    for (var i = lists.length; i--;) {
        if (lists[i].id != id) {
            lists[i].style.display = 'none';
        }
    }
}

Div隐藏节目，标题处有后退按钮显示

1 个答案: