JavaScript, Divs не возвращается в исходное положение

Question

У меня есть 3 ссылки по центру страницы, которые, когда вы нажимаете на них, заставляют div отображаться справа, а ссылки перемещаются влево от страницы. Я хочу, чтобы ссылки переместились обратно в центр страницы, как только все показания divs будут скрыты. Кроме того, есть ли способ, которым я могу заставить divs отображаться на первом клике, а не на втором щелчке.

Вот скрипка: 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%; 
} 

Вот скрипка: https://jsfiddle.net/tk8gkrho/1/

Прошу прощения, что это долго, я все еще учусь.

Answer 1

Вы можете центрировать эти ссылки, используя только CSS без необходимости отцентрировать их вам код яваскрипта, чтобы сделать это, я использовал display:inline-block и добавить контейнер все, что HTML и сделал свой text-align:center;

, а также решена проблема показывая дивы на первый щелчок по тумблер active class на ссылки нажмите

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