Question

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

这是我的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将这些链接居中，不需要将它们放在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');
});

JavaScript，Div不会回到初始位置

1 个答案: