Fatal编程技术网
  • javascript/
  • Javascript 展开一个div，其中包含4个图像下的描述

Javascript 展开一个div，其中包含4个图像下的描述

javascript html css

Javascript 展开一个div，其中包含4个图像下的描述,javascript,html,css,Javascript,Html,Css,我想不出热，使代码的工作，我有4个图像并排，我需要一个描述部分下的图像，这部分应该是隐藏的，当我点击一个图像正确的信息应该显示出来 <section class="img" style="text-align:center;"> <div class="container" onclick="select(1)" onclick="hideunhide()""> <img src="img/1.jpg">

我想不出热，使代码的工作，我有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>
请试试这个，希望它能帮助巴迪！它在我的控制台上工作，您可以进一步增强它：

<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>


提供头衔
人
时间

国家

人
时间

国家

人
时间

国家

人
时间

国家

函数隐藏（id）{
var obj=document.getElementById（id）；
if（obj.style.display==“块”）
obj.style.display=“无”；
其他的
obj.style.display=“块”；
};
第二个版本，基于注释，文本在页面宽度上流动，响应性强，这意味着即使图像断线（使用媒体查询和最小脚本），文本也始终位于其图像的正下方

注意：只使用CSS版本，虽然还不太满意（）

（函数（lastimg）{
document.querySelector（“#img select”）.addEventListener（'click'，函数（e）{
如果（e.target.tagName.toLowerCase（）=“输入”）{
if（lastimg==e.target）{
e、 target.checked=false；
lastimg=null；
}否则{
lastimg=e.目标；
}      
}
});
}());

.container{
显示器：flex；
柔性包装：包装；
}
.容器>标签{
弹性：1；
弹性基准：25%；
顺序：1；
背景色：#eee；
}
.container>div{
弹性：1；
弹性基准：100%；
顺序：5；
背景色：#eee；
}
.集装箱标签img{
显示：块；
保证金：0自动；
}
.container input、.container input~div{
显示：无；
}
.容器输入：选中~div{
显示：块；
填充：10px；
}
.货柜组{
文本对齐：居中；
}
@媒体屏幕和屏幕（最大宽度：650px）{
.容器>标签{
弹性基准：50%；
}
.容器>标签：第n种类型（3），
.container>标签：第n个类型（4）{
顺序：3；
}
.容器>分区：第n个类型（1），
.container>div:n类型（2）{
顺序：2；
}
}
@媒体屏幕和屏幕（最大宽度：325px）{
.容器>标签{
弹性基准：50%；
}
.容器>标签：第n个类型（1），
.container>div:n类型（1）{
顺序：1；
}
.容器>标签：第n个类型（2），
.container>div:n类型（2）{
顺序：2；
}
.容器>标签：第n种类型（3），
.container>div:n类型（3）{
顺序：3；
}
.容器>标签：第n种类型（4），
.container>div:n类型（4）{
顺序：4；
}
}



IMG1的一些文本在整个页面宽度上流动
img2的一些文本
img3的一些文本
img4的一些文本

您需要提供您的样式。我已经添加了样式。样式怎么样？你想隐藏我单击图像时已经显示的信息，还是我一直单击时应该显示的信息？类似这样的？？默认情况下，信息应隐藏。如果单击img1，则应取消隐藏img1信息。如果再次单击img1，则应隐藏信息。如果在显示img1信息时单击img2，则应切换信息。当我点击img1时，应显示说明；如果在显示img1说明时点击img2，则应切换说明，当第二次点击img时，应该隐藏文本。@TomasBond文本现在在第二次点击时被隐藏，但我将修复文本全部被隐藏width@TomasBond更新了我的答案。你使用什么浏览器？我使用Firefox，但应该与大多数浏览器兼容。我看到所有的文字都在同一个位置（我想这只是因为它们没有像我在页面上输入的那样集中在页面上）第二次单击“隐藏”对我不起作用，文字只是停留在那里你似乎对此了解很多，当在小屏幕（如手机）中看到时，它应该会在当前行下显示的图像下弹出，如果图像以2x2结构拆分，则来自img 1和2的信息应在这些图像下弹出，来自img3和4的信息应在页面底部弹出。很难理解，希望你不难理解

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
}



<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>