JavaScript，Divs 不会回到初始位置

Question

我在页面中央有 3 个链接，当您单击它们时，它会在右侧显示一个 div，而链接会移动到页面左侧。一旦所有的 div 显示都被隐藏，我希望链接移回页面的中心。另外，有什么方法可以让 div 在第一次点击而不是第二次点击时出现。

这是 fiddle :https://jsfiddle.net/tk8gkrho/1/

这是我的 HTML:

<div class="link">
        <ul>
            <li><a id="box1"> box1 </a></li>
            <li><a id="box2"> box2 </a></li>
        </ul>
</div>
  
<div id="display1">
    <img src="http://globalgamejam.org/sites/default/files/styles/game_sidebar__normal/public/game/featured_image/promo_5.png?itok=9dymM8JD">
</div>

<div id="display2">
        <img src="https://s-media-cache-ak0.pinimg.com/564x/a1/e3/6b/a1e36bcb8ce179bd8cc8db28ff4ef6fb.jpg">
</div>

这是我的 JavaScript:

var link = document.getElementsByClassName("link")
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");


var display1 = document.getElementById("display1");
var display2 = document.getElementById("display2");

function movingLeft(){
    for( var i = 0; i < link.length ; i++)
    {
        link[i].style.float = "left";
        link[i].style.paddingLeft = "20px";
        link[i].style.position = "fixed";
    }
};

function backToCenter(){
    if( (display1.style.display === "none") &&
        (display2.style.display === "none") )
        { 
            for( var i = 0; i < link.length; i++)
                link[i].style.float = "";
                link[i].style.position = "initial";
        }
}

box1.addEventListener("click", function(){
    if(display1.style.display === "none"){
        display1.style.display = "block";
        display1.style.float = "right";
        movingLeft();
    }
    else{
        display1.style.display = "none";
        backToCenter();
    }   
});

box2.addEventListener("click", function(){
    if(display2.style.display === "none"){
        display2.style.display = "block";
        display2.style.float = "right";
        movingLeft();
    }
    else{
        display2.style.display = "none";
        backToCenter();
    }   
});

这是我的 CSS:

.link{
    width: 30%;
    height: 100%;
    margin: 0 auto;
}

ul {
    padding: 0;
    list-style-type: none;
    overflow: hidden;
}

li{
    height: 13vh;
    padding-bottom: 5%;
}

li a {
    height: 75%;
    border: 1px solid white;
    border-radius: 5px 5px 5px 5px;
    background-color: rgba(79,87,89,0.9);
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    line-height: 10vh;
    transition: background-color 0.9s;
}

li a:hover{
    background-color: black;
    border: 2px solid white;
    font-weight: bold;
}

#display1{
    display: none;
    float:right;
    background-color: rgba( 0, 0, 0, 0.8); 
    color: white;
    width: 60%;
    margin-right: 30px;
}

#display1 img{
    width: 80%;
    height: 30%;
}

#display2{
    display: none;
    float:right;
    background-color: rgba( 0, 0, 0, 0.8); 
    color: white;
    width: 60%;
    margin-right: 30px;
}

#display2 img{
    width: 80%;
    height: 30%;
}

这是 fiddle :https://jsfiddle.net/tk8gkrho/1/

抱歉有点长，我还在学习。

Answer 1

您可以只使用 css 将这些链接居中，而无需将它们放在您的 javascript 代码中，为此我使用了 display:inline-block 并向所有 html 添加了一个容器并制作了它的 text-align:center;

并且还通过在链接点击上切换 active class 解决了在第一次点击时显示 div 的问题

https://jsfiddle.net/tk8gkrho/2/

添加容器后的 html :

<div class="myContainer">
  <div class="link">
    <ul>
      <li><a id="box1"> box1 </a></li>
      <li><a id="box2"> box2 </a></li>
    </ul>
  </div>

  <div id="display1">
    <img src="http://globalgamejam.org/sites/default/files/styles/game_sidebar__normal/public/game/featured_image/promo_5.png?itok=9dymM8JD">
  </div>

  <div id="display2">
    <img src="https://s-media-cache-ak0.pinimg.com/564x/a1/e3/6b/a1e36bcb8ce179bd8cc8db28ff4ef6fb.jpg">
  </div>
</div>

和CSS:

.myContainer{
  text-align:center;
}
.link{
    width: 30%;
    display:inline-block;
}

ul {
    padding: 0;
    list-style-type: none;
    overflow: hidden;
}

li{
    height: 13vh;
    padding-bottom: 5%;
}

li a {
    height: 75%;
    border: 1px solid white;
    border-radius: 5px 5px 5px 5px;
    background-color: rgba(79,87,89,0.9);
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    line-height: 10vh;
    transition: background-color 0.9s;
}

li a:hover{
    background-color: black;
    border: 2px solid white;
    font-weight: bold;
}

#display1{
    display: none;
    float:right;
    background-color: rgba( 0, 0, 0, 0.8); 
    color: white;
    width: 60%;
    margin-right: 30px;
}

#display1 img{
    width: 80%;
    height: 30%;
}

#display2{
    display: none;
    float:right;
    background-color: rgba( 0, 0, 0, 0.8); 
    color: white;
    width: 60%;
    margin-right: 30px;
}

#display2 img{
    width: 80%;
    height: 30%;
}

#display1.active, #display2.active{display:block;}

和脚本:

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var display1 = document.getElementById("display1");
var display2 = document.getElementById("display2");

box1.addEventListener("click", function(){
    display1.classList.toggle('active');
});

box2.addEventListener("click", function(){
    display2.classList.toggle('active');
});