<div class="yi"> <div class="top"> <img src="images/6.png"> <div class="txt"> <h3>周杰</h3> <p>职称:技术院长</p> <p>职业编号:A012010430012</p> <p>从业年限:12年</p> </div> </div> <div class="bottom"> <div class="top2"> <span>医生擅长</span> <img class="jian" src="images/s-下箭头%20(1).png" > </div> <div class="center"> <p>湖南农业大学动物医学院,从事小动物临床10余年擅长眼盼外讯眼球脱,出,猫角障炎,猫泪道姐寒,疥端病猫休克董感染症,猫眼色先天性异常,皮肤真前病,毛生长异常,眼验炎,猫泛白细胞减少症,青光眼,脸腺炎,玻璃体疾病服球摘瑜,视神经逃.,猫骨弓形虫病虽感染症,猫感冒,眼验内翻猫澈创绝育手术,眼科疾病</p> </div> </div> </div>center类隐藏了点击img后展示怎么写js
时间: 2023-08-14 19:22:41 浏览: 45
你可以通过添加点击事件来实现点击展开隐藏内容的效果。具体实现可以参考以下代码:
```javascript
// 获取需要点击展开隐藏的元素
var center = document.querySelector('.center');
var img = document.querySelector('.jian');
// 添加点击事件
img.addEventListener('click', function() {
// 判断当前是否已经展开
if (center.style.display === 'none') {
// 如果已经隐藏,则展开
center.style.display = 'block';
img.src = 'images/s-上箭头.png'; // 修改箭头方向
} else {
// 如果已经展开,则隐藏
center.style.display = 'none';
img.src = 'images/s-下箭头%20(1).png'; // 修改箭头方向
}
});
```
你可以将上述代码添加到页面中,实现点击展开隐藏的效果。
相关问题
<div class="container"> <div class="row-cols-3"> <div class="box2"> <p> <a href="#"><img src="../static/img/飙升榜.jpg" alt="飙升榜榜" class="circle" ></a> <h2>飙升榜</h2></p> </div> <div class="box2"> <p> <a href="#"><img src="../static/img/新歌榜.jpg" alt="新歌榜" class="circle" ></a> <h2>新歌榜</h2></p></a></p> </div> <div class="box2"> <p><a href="#"><img src="../static/img/热歌榜.jpg" alt="热歌榜" class="circle" ></a> <h2>热歌榜</h2></p></a></p> </div> </div> </div>如何container中的三个box2位于同一行?
要让container中的三个box2位于同一行,你可以在containerclass属性中添加"row"类。这样,代码会变成这样:
```html
<div classcontainer">
<div class="row">
<div class="box2">
<p <a href="#"><img src="../static/img飙升榜.jpg" alt="飙升榜榜" class="circle"></a>
<h2>飙升榜</h2>
</p>
</div>
<div class="box2">
<p>
<a href="#"><img src="../static/img/新歌榜.jpg" alt="新歌榜" class="circle"></a>
<h2>新歌榜</h2>
</p>
</div>
<div class="box2">
<p>
<a href="#"><img src="../static/img/热歌榜.jpg" alt="热歌榜" class="circle"></a>
<h2>热歌榜</h2>
</p>
</div>
</div>
</div>
```
现在,这三个box2元素应该会水平排列在同一行上了。
<div class="col-lg-7"> <img src="images/aaa.gif" alt="your_image_description" width="70%" height="70%"> <h3 class="mb-4">基本信息</h3> <br><br> <div class="col-sm-6 py-2"><h6>姓名: <span class="text-secondary">张雅维</span></h6></div> <div class="col-sm-6 py-2"><h6>出生日期: <span class="text-secondary">2003.3.15</span></h6></div> <div class="col-sm-6 py-2"><h6>性别: <span class="text-secondary">女</span></h6></div> <div class="col-sm-6 py-2"><h6>年龄: <span class="text-secondary">20</span></h6></div> <div class="col-sm-6 py-2"><h6>手机号码: <span class="text-secondary">12222222222</span></h6></div> <div class="col-sm-6 py-2"><h6>Email: <span class="text-secondary">2825275860@qq.com</span></h6></div> <div class="col-sm-6 py-2"><h6>学历: <span class="text-secondary">本科</span></h6></div> <div class="col-sm-6 py-2"><h6>学校: <span class="text-secondary">宁夏医科大学</span></h6></div> </div>将文字放在图片上方
您可以使用CSS中的position属性将文字放在图片上方。具体操作如下:
1. 首先,您需要将图片和文字都放在一个父容器中,例如一个div元素。
2. 然后,将图片的position属性设置为relative,以便在父容器中定位。
3. 接着,将文字的position属性设置为absolute,以便相对于父容器进行定位。
4. 最后,使用top和left属性对文字进行微调,使其位于图片的上方。
以下是示例代码:
```
<div class="parent-container">
<img src="images/aaa.gif" alt="your_image_description" width="70%" height="70%">
<h3 class="mb-4">基本信息</h3>
<div class="text-container">
<div class="col-sm-6 py-2"><h6>姓名: <span class="text-secondary">张雅维</span></h6></div>
<div class="col-sm-6 py-2"><h6>出生日期: <span class="text-secondary">2003.3.15</span></h6></div>
<div class="col-sm-6 py-2"><h6>性别: <span class="text-secondary">女</span></h6></div>
<div class="col-sm-6 py-2"><h6>年龄: <span class="text-secondary">20</span></h6></div>
<div class="col-sm-6 py-2"><h6>手机号码: <span class="text-secondary">12222222222</span></h6></div>
<div class="col-sm-6 py-2"><h6>Email: <span class="text-secondary">2825275860@qq.com</span></h6></div>
<div class="col-sm-6 py-2"><h6>学历: <span class="text-secondary">本科</span></h6></div>
<div class="col-sm-6 py-2"><h6>学校: <span class="text-secondary">宁夏医科大学</span></h6></div>
</div>
</div>
<style>
.parent-container {
position: relative;
}
img {
position: relative;
}
.text-container {
position: absolute;
top: 0;
left: 0;
}
</style>
```
您可以根据需要进行微调,以使文字和图片的布局更加美观。