Javascript 标题处显示后退按钮的Div hide show_Javascript_Jquery_Html

Javascript 标题处显示后退按钮的Div hide show

javascript jquery html

Javascript 标题处显示后退按钮的Div hide show,javascript,jquery,html,Javascript,Jquery,Html,伙计们，我在选择演员方面有问题。我必须在代码中使用大量的潜水。但同时我在头球有后退按钮，所以我想按下后退按钮，然后我移动到后退div 这是我的java脚本代码 <script type="text/javascript"> function toggle_visibility(id) { var e = document.getElementById(id); if (e.style.display == 'block') e.style.display = 'non

伙计们，我在选择演员方面有问题。我必须在代码中使用大量的潜水。但同时我在头球有后退按钮，所以我想按下后退按钮，然后我移动到后退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>


功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display='block'）e.style.display='none'；
else e.style.display='block'；
hidealbut（id）；
}
函数HIDEALBUT（id）{
var list=document.querySelectorAll（'.list'）；
对于（var i=lists.length；i--；）{
if（列出[i].id！=id）{
列出[i].style.display='none'；
}
}
}

这是我的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>


身体{
}
#列表1{背景颜色：珊瑚；}
#列表2{背景色：#45cd2a；}
#列表3{背景色：#ab4d2a；}
到后面去

项目一
项目二
项目三


项目一
项目二
项目三


项目一
项目二
项目三

这段代码运行良好，但我不知道如何实现返回按钮返回div。。？？请帮帮我。

试试这个：

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>

这里没有使用jQuery。您是想标记它吗？您需要另一个变量来存储以前的div元素如果您使用jQuery，那么它很容易。使用$（“#”+当前的_id）.prev（“li”）.show（）；是的，我知道我没有使用jquery..但可能在解决方案中使用jquery。？问号显示了我必须写些什么来代替？…所以如果你使用jQuery，那就很容易了。使用$（“#”+当前的_id）.prev（“li”）.show（）；如果您只想使用javascript，那么此链接将帮助您查找上一个和下一个兄弟姐妹。谢谢。这非常有用。。。这是其他人的小提琴演奏结果。

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';
        }
    }
}