在4个图像下展开包含描述的div

时间：2016-03-22 06:04:42

标签： javascript html css

我无法弄清楚制作一个有效的代码，我有4个图像并排，我需要图像下的描述部分，这部分应该隐藏，当我点击图像时，应该显示正确的信息

<section class="img" style="text-align:center;">            
    <div class="container" onclick="select(1)" onclick="hideunhide()"">
        <img src="img/1.jpg">
    </div>
    <div class="container" onclick="select(2)">
        <img src="img/2.jpg">
    </div>
    <div class="container" onclick="select(3)">
        <img src="img/3.jpg">
    </div>    
    <div class="container" onclick="select(4)">
        <img src="img/4.jpg">
    </div>   

</div>
</section>
<section id="description">
    <div class="info" id="desc1">
        <h1>people</h1>
        <p>time</p>
        <p>country</p>
    </div>
    <div class="info" id="desc2">
        <h1>people</h1>
        <p>time</p>
        <p>country</p>
    </div>
    <div class="info" id="desc3">
        <h1>people</h1>
        <p>time</p>
        <p>country</p>
    </div>
    <div class="info" id="desc4">
        <h1>people</h1>
        <p>time</p>
        <p>country</p>
    </div>
</section>

javascript即时使用：

<script>
    function hideunhide() {
        var obj = document.getElementById("description");
        if(obj.style.display == "block")
            obj.style.display = "none";
        else
            obj.style.display = "block";
    };
    function select()
        var obj = document.getElementByID(select())
</script>

我知道我搞砸了select（），但是无法弄明白。有什么帮助吗？我可以使用html，css和javascript。感谢

编辑：添加了CSS 

div.container {
    display: inline-block;
    margin: 25px;
    border: solid 5px #333333;
    border-radius: 5px;
}
div.container:hover {
    border: solid 5px #fff;
}
.info {
    border: solid 5px #333333;
    text-align: center
}

2 个答案:

答案 0 :(得分：2)

第二个版本，基于评论，文本在页面宽度上流动，响应，意味着即使在图像分隔线（使用媒体查询和最小脚本）时，文本也始终直接在其图像下方

注意：处理仅限CSS的版本，但尚未完全满意（fiddle demo）

＆＃13;
＆＃13; 
(function(lastimg) {
  document.querySelector("#img-select").addEventListener('click', function(e){
    if (e.target.tagName.toLowerCase() == 'input') {
      if (lastimg == e.target) {
        e.target.checked = false;
        lastimg = null;
      } else {
        lastimg = e.target;
      }      
    }
  });
}());
＆＃13; 
.container {
  display: flex;
  flex-wrap: wrap;
}
.container > label {
  flex: 1;
  flex-basis: 25%;
  order: 1;
  background-color: #eee;
}
.container > div {
  flex: 1;
  flex-basis: 100%;
  order: 5;
  background-color: #eee;
}
.container label img {
  display: block;
  margin: 0 auto;
}
.container input, .container input ~ div {
  display: none;
}

.container input:checked ~ div {
  display: block;
  padding: 10px;
}
.container div div {
  text-align: center;
}

@media screen and (max-width: 650px) {
  
  .container > label {
    flex-basis: 50%;
  }
  .container > label:nth-of-type(3),
  .container > label:nth-of-type(4) {
    order: 3;
  }
  .container > div:nth-of-type(1),
  .container > div:nth-of-type(2) {
    order: 2;
  }
  
}
@media screen and (max-width: 325px) {

  .container > label {
    flex-basis: 50%;
  }

  .container > label:nth-of-type(1),
  .container > div:nth-of-type(1) {
    order: 1;
  }
  .container > label:nth-of-type(2),
  .container > div:nth-of-type(2) {
    order: 2;
  }
  .container > label:nth-of-type(3),
  .container > div:nth-of-type(3) {
    order: 3;
  }
  .container > label:nth-of-type(4),
  .container > div:nth-of-type(4) {
    order: 4;
  }

}
＆＃13; 
<div id="img-select" class="container">
  <label for="img1">
    <img src="http://placehold.it/150x200" alt="">
  </label>
  <label for="img2">
    <img src="http://placehold.it/150x200" alt="">
  </label>
  <label for="img3">
    <img src="http://placehold.it/150x200" alt="">
  </label>
  <label for="img4">
    <img src="http://placehold.it/150x200" alt="">
  </label>

  <div>
    <input id="img1" type="radio" name="img-descr">
    <div>Some text for img 1 that flow across full page width</div>
  </div>
  <div>
    <input id="img2" type="radio" name="img-descr">
    <div>Some text for img 2</div>
  </div>
  <div>
    <input id="img3" type="radio" name="img-descr">
    <div>Some text for img 3</div>
  </div>
  <div>
    <input id="img4" type="radio" name="img-descr">
    <div>Some text for img 4</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

在这个第一个版本中，文本始终位于其图像下方，并且在较小的屏幕上也会响应。 （这个版本仍然使用最小的脚本）

＆＃13;
＆＃13; 
(function(lastimg) {
  document.querySelector("#img-select").addEventListener('click', function(e){
    if (e.target.tagName.toLowerCase() == 'input') {
      if (lastimg == e.target) {
        e.target.checked = false;
        lastimg = null;
      } else {
        lastimg = e.target;
      }      
    }
  });
}());
＆＃13; 
label {
  display: inline-block;
  vertical-align: top;
}
label img {
  display: block;
}
label input, label span {
  display: none;
}

label input:checked ~ span {
  display: inline;
}
＆＃13; 
<div id="img-select">
  <label>
    <input type="radio" name="img-descr">
    <img src="http://placehold.it/150x200" alt="">
    <span>Some text for img 1</span>
  </label>
  <label>
    <input type="radio" name="img-descr">
    <img src="http://placehold.it/150x200" alt="">
    <span>Some text for img 2</span>
  </label>
  <label>
    <input type="radio" name="img-descr">
    <img src="http://placehold.it/150x200" alt="">
    <span>Some text for img 3</span>
  </label>
  <label>
    <input type="radio" name="img-descr">
    <img src="http://placehold.it/150x200" alt="">
    <span>Some text for img 4</span>
  </label>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

请尝试这个，希望它可以帮助哥们！它在我的控制台上工作基础，你可以更多地增强它：

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <section class="img" style="text-align:center;">            
            <div class="container" onclick="hideunhide(1)">
                <img src="img/1.jpg">
            </div>
            <div class="container" onclick="hideunhide(2)">
                <img src="img/2.jpg">
            </div>
            <div class="container" onclick="hideunhide(3)">
                <img src="img/3.jpg">
            </div>    
            <div class="container" onclick="hideunhide(4)">
                <img src="img/4.jpg">
            </div>   
        </section>

        <section id="description">
            <div id="1" style="display:none;">
                <h1>people</h1>
                <p>time</p>
                <p>country</p>
            </div>
            <div id="2" style="display:none;">
                <h1>people</h1>
                <p>time</p>
                <p>country</p>
            </div>
            <div id="3" style="display:none;">
                <h1>people</h1>
                <p>time</p>
                <p>country</p>
            </div>
            <div id="4" style="display:none;">
                <h1>people</h1>
                <p>time</p>
                <p>country</p>
            </div>
        </section>
 <script>

              function hideunhide(id) {
                  var obj = document.getElementById(id);
                  if(obj.style.display == "block")
                      obj.style.display = "none";
                  else
                    obj.style.display = "block";
                };

</script>
</body>
</html>
相关问题
最新问题